React (TypeScript)

You should create a functional component named App as the main entry point of your React application. Your React code should be linted using ESLint with the recommended configuration for React and TypeScript.

Entry file

The entry file for this template must be one of the following: main.tsx or index.tsx. The first one present is used as the entry point.

Version

Running on Node.js v20.0.0

Supported languages

TypeScript

Testing framework

Jest

Special reminders and implementation details

• React Testing Library, a library to assist with testing React components. It is built on top of DOM Testing Library by adding APIs for working with React components.

Example with React Testing Library:

import "@testing-library/jest-dom/jest-globals";
import * as React from "react";

import { describe, expect, it } from "@jest/globals";
import { render, screen } from "@testing-library/react";
import HelloWorld from "./App";

describe("HelloWorld", () => {
  it("renders Hello, World!", () => {
    render(React.createElement(HelloWorld));
    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
  });
});

Remember to always keep your components modular and make use of React's hooks and context API for state management and side effects. Use TypeScript types and interfaces for props and state.

Included libraries

• @babel/preset-env
• babel-jest
• @babel/preset-react
• @testing-library/react
• jest-environment-jsdom
• @testing-library/jest-dom
• @testing-library/user-event
• jest-transform-stub
• typescript

Write-tests challenges

This template supports write-tests challenges. The reference solution is already written and you write the tests: they must pass on the reference solution and catch every hidden buggy variant. Test runs your tests against the reference solution only, while Verify tests and Submit also run them against the hidden buggy variants. Read Solving a write-tests challenge for the full flow.

• Test runner: Jest (ts-jest) + @testing-library/react
• Test files are *.spec.ts, not .tsx: render with React.createElement(App) instead of JSX.
• Import @testing-library/jest-dom/jest-globals first so toBeInTheDocument() is typed and registered.
• For controlled inputs use fireEvent.change(input, { target: { value } }).

A complete example is in Write-tests examples by template.

How to debug

Debugging React code with TypeScript is essential for identifying and fixing issues. Utilizing console.log() statements can aid in this process.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Pinpoint the component or function in your React codebase where you suspect the problem resides.

2. Insert console.log() Statements: Strategically place console.log() statements before and after the suspected problematic code to log variable values and track the flow of execution.

3. Check the Results Output of your tests

4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

5. Analyze the Output: Examine the output logged in the console to understand the flow of your React application's execution and identify potential issues.

Here's an example of how to use console.log() for debugging in React with TypeScript:

import React, { FC, useState } from "react";

const Counter: FC = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = (): void => {
    console.log("Button clicked!");
    setCount((prevCount: number) => prevCount + 1);
  };

  console.log("Current count:", count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;