Unit testing React/TypeScript with Jest

If you want to write tests for your React/TypeScript application with Jest, you need to do some configuration and install some libraries get Jest tests running. Application in the repo was built using Vite.

Install test utilities as dev dependencies

List of required libraries

@testing-library/react and react-test-renderer: These libraries are crucial for testing React components in a way that simulates real user interactions. @testing-library/react provides utilities to query and interact with React components rendered in a virtual DOM, while react-test-renderer allows you to render React components to a JavaScript object for inspection.
jest: The testing framework for JavaScript/TypeScript applications.
@types/jest: TypeScript types for Jest. These types enhance the development experience by providing TypeScript-specific definitions for Jest, ensuring type safety when working with Jest in a TypeScript project.
ts-jest: is a TypeScript preprocessor for Jest, allowing Jest to work seamlessly with TypeScript. It enables Jest to understand and transpile TypeScript code during the testing process.
jest-environment-jsdom: This library sets up the Jest environment to mimic a browser-like environment using jsdom. It ensures that your React components can be tested in an environment that closely resembles the browser.
@testing-library/jest-dom: Extends Jest's expect functionality with additional matchers specifically designed for testing DOM elements. This library enhances the readability and expressiveness of your tests when dealing with React components and the DOM.

React testing library and renderer

npm install --save-dev @testing-library/react react-test-renderer

Jest

npm install --save-dev jest

@types/jest

npm i --save-dev @types/jest

ts-jest

npm install --save-dev ts-jest

jest-environment-jsdom

Note! remember to include jest-environment-jsdom in the jest.config.cjs

npm install --save-dev jest-environment-jsdom

Install jest-dom modules on dev-dependencies

npm i --save-dev @testing-library/jest-dom

Remember to import the module to the test file with command:

import "@testing-library/jest-dom";

Config files

Jest configuration

Create jest.config.cjs file

// jest.config.cjs

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
...
}

TypeScript configuration

Update compiler options in tsconfig.json.

Note! Might cause some issues when importing from CommonJS and ES modules

// tsconfig.json

{
  "compilerOptions": {
    // ... other options

    "esModuleInterop": true
  }
  // ... other configurations
}

Scripts

Create a script in package.json for running tests with Jest with jest.config.cjs

// package.json

"scripts": {
    "test": "jest --config jest.config.cjs"
  }

After the script is added in package.json, it will run the tests with Jest using jest.config.cjs file for configurations.

npm test

Using jest

Setup

Create the Test Folder:
- In the root level of your project, create a folder named __tests__. Jest is configured to automatically discover and run test files located in this folder.
Test File Naming Convention:
- When creating test files, follow the naming convention by appending .test before the file extension (.ts or .tsx). For example:
  - For TypeScript files: sample.test.ts
  - For TypeScript files with JSX syntax: sample.test.tsx

Sample syntax for writing tests with Jest

// sample.test.ts

describe("Sample test", () => {
  test("Testing if true is true", () => {
    expect(true).toBe(true);
  });
});

Check the __tests__ folder in the repo for more examples

JerryUusis / unit_testing_react_ts