Configuring Jest with a React Preset for TypeScript Projects

This challenge focuses on setting up Jest to properly test React components written in TypeScript. Many developers find configuring Jest for React projects, especially those using TypeScript, can be tricky. This exercise will guide you through creating a Jest configuration that leverages a React preset and handles TypeScript-specific considerations.

Problem Description

You are tasked with creating a jest.config.ts file for a React project written in TypeScript. This configuration file should:

1. Extend the @jest/preset-react preset: This preset provides a baseline configuration optimized for React projects, including necessary transforms and mocks.
2. Configure TypeScript: The configuration must correctly handle TypeScript files, ensuring that Jest can understand and execute them. This involves specifying the transform option to use ts-jest to compile TypeScript code into JavaScript before testing.
3. Set up module name mapping: Define a moduleNameMapper to mock CSS modules and other non-JavaScript modules that your components might import. This is crucial for isolating your components during testing.
4. Configure test environment: Specify the test environment as jsdom to simulate a browser environment for your React components.
5. Handle setupFilesAfterEnv: Include a setupFilesAfterEnv array to specify files that should be executed after the Jest environment is set up. This is useful for setting up global variables or mocks.

Expected Behavior:

When Jest runs, it should:

• Successfully compile TypeScript files.
• Mock CSS modules and other non-JavaScript dependencies.
• Execute tests within a jsdom environment.
• Execute any setup files specified in setupFilesAfterEnv.

Edge Cases to Consider:

• Project structure: The configuration should be relatively agnostic to the specific project structure, assuming a standard React/TypeScript setup.
• CSS Modules: Ensure CSS Modules are correctly mocked to prevent errors during testing.
• Other non-JavaScript dependencies: Consider how to handle other non-JavaScript dependencies (e.g., images, fonts) that your components might import.

Examples

Example 1:

Input: A React project with components using CSS Modules and TypeScript.
Output: A `jest.config.ts` file that allows Jest to run tests successfully.
Explanation: The configuration should extend `@jest/preset-react`, use `ts-jest` for TypeScript compilation, mock CSS Modules, and set the test environment to `jsdom`.

Example 2:

Input: A React project with a `setupFilesAfterEnv` array containing a file that sets up a global mock.
Output: The `jest.config.ts` file includes the `setupFilesAfterEnv` array with the correct path to the setup file.
Explanation: The configuration should correctly specify the path to the setup file, ensuring it's executed after the Jest environment is initialized.

Constraints

• The configuration file must be written in TypeScript (.ts extension).
• The configuration must be compatible with Jest version 27 or higher.
• The configuration should be relatively concise and easy to understand.
• The configuration should not introduce any unnecessary dependencies.
• The moduleNameMapper should mock CSS modules using css-modules-jest.

Notes

• You'll need to install the following dependencies: jest, @jest/preset-react, ts-jest, and css-modules-jest.
• Consider using a transform configuration that uses ts-jest to handle TypeScript compilation.
• The moduleNameMapper is crucial for mocking non-JavaScript dependencies. Use css-modules-jest to mock CSS modules.
• The setupFilesAfterEnv array allows you to set up global mocks or variables before each test.
• The testEnvironment option should be set to jsdom.
• Refer to the Jest and ts-jest documentation for more details on configuration options. The @jest/preset-react documentation is also helpful.