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.
-
@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.
npm install --save-dev @testing-library/react react-test-renderer
npm install --save-dev jest
npm i --save-dev @types/jest
npm install --save-dev ts-jest
Note! remember to include jest-environment-jsdom
in the jest.config.cjs
npm install --save-dev jest-environment-jsdom
npm i --save-dev @testing-library/jest-dom
Remember to import the module to the test file with command:
import "@testing-library/jest-dom";
Create jest.config.cjs
file
// jest.config.cjs
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jest-environment-jsdom',
...
}
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
}
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
-
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.
- In the root level of your project, create a folder named
-
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
- For TypeScript files:
- When creating test files, follow the naming convention by appending
// 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