Installing and Configuring Jest with React Testing Library 

Installation

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

yarn add --dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom

yarn add --dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom

Optional (If we use Fetch API in the project)

Note: As of Node.js v18, the Fetch API is natively available, so 'whatwg-fetch' It would not be necessary, however, to receive the message 'ReferenceError: fetch is not defined' to which this installation is a solution.

npm install --save-dev whatwg-fetch

npm install --save-dev whatwg-fetch

yarn add --dev whatwg-fetch

yarn add --dev whatwg-fetch

Update package.json scripts

--watchAll allows Jest to observe changes to files and automatically rerun tests whenever it detects a change.

"scripts: {
...
"test": "jest --watchAll"

"scripts: {
...
"test": "jest --watchAll"

Create the Babel Configuration

The preset @babel/preset-env is configured to generate code that is compatible with ES modules (ECMAScript) and allows native browser module features.

The preset @babel/preset-react enables JSX support and configures the automatic runtime to reduce the amount of duplicate code in React components.

Note: This file is created at the root of your project.

module.exports = {
  presets: [
    [ '@babel/preset-env', { targets: { esmodules: true } } ],
    [ '@babel/preset-react', { runtime: 'automatic' } ],
  ],
};

module.exports = {
  presets: [
    [ '@babel/preset-env', { targets: { esmodules: true } } ],
    [ '@babel/preset-react', { runtime: 'automatic' } ],
  ],
};

Optional, but eventually necessary, create jest config and jest setup

This configures Jest to use the jest-environment-jsdom test environment, which simulates a browser environment in Node.js. In addition, an additional configuration file called jest.setup.js is specified that will be executed before testing. This allows you to set custom settings.

Note: These files are created at the root of your project.

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js']
}

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js']
}

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch

Command descriptions and documentation links

🔗 npm install --save-dev jest

Install Jest, a tool with which you can create and run unit tests.

🔗 npm install --save-dev babel-jest @babel/core @babel/preset-env

Install the tools needed to transply and compile your JavaScript code during testing with Jest. This ensures that your tests are compatible with a variety of environments and browser versions, and allows you to use modern JavaScript features.

🔗 npm install --save-dev @babel/preset-react

Install the @babel/preset-react preset, which allows Babel to understand and convert the JSX syntax used in React components into browser-friendly JavaScript code. In addition, with the runtime: 'automatic' option, this preset optimizes component performance by automatically importing the react/jsx-runtime module to reduce code redundancy in the final bundles.

🔗 npm install --save-dev @testing-library/react

Adds the @testing-library/react library to make it easier to test React components. This tool allows you to simulate interactions and perform tests based on user behavior in a more realistic way.

🔗 npm install --save-dev @types/jest

Installing @types/jest enables autocomplete and error detection in the code editor when writing tests in Jest. This dependency provides TypeScript types and definitions for Jest, which improves the development experience by displaying contextual hints and warnings when writing tests.

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

Add the jsdom test environment to Jest, allowing you to simulate a virtual DOM in Node.js. This is crucial for tests that involve interactions with React components, such as button clicks and state changes.

🔗 npm install --save-dev whatwg-fetch

Install the whatwg-fetch dependency, which adds an implementation of the Fetch API in environments like Node.js.