Unit Testing With Jest | Testing

Writing unit tests with Jest

Unit testing is a critical part of ensuring that your React components work as expected. Jest is a popular testing framework for JavaScript that works seamlessly with React. This tutorial covers the basics of writing unit tests with Jest, including setting up Jest, writing tests, and running them.

Key Points:

Jest is a powerful testing framework for JavaScript, commonly used with React.
Unit tests focus on testing individual components or functions in isolation.
Writing unit tests with Jest involves using describe, test, and expect functions.

Setting Up Jest

To get started with Jest, you need to install it as a development dependency in your project.


// Install Jest
npm install --save-dev jest

// Optionally, install Babel if you are using ES6+ syntax
npm install --save-dev @babel/preset-env

// Add a test script to your package.json file
{
  "scripts": {
    "test": "jest"
  }
}

// Create a Babel configuration file (.babelrc)
{
  "presets": ["@babel/preset-env"]
}

Writing Tests with Jest

Jest provides a simple API for writing tests using describe, test, and expect functions.


// Example of a simple test
// src/sum.js
function sum(a, b) {
    return a + b;
}
module.exports = sum;

// src/sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

// Run the tests
npm test

Testing React Components

To test React components, you can use Jest in combination with a testing library like React Testing Library.


// Install React Testing Library
npm install --save-dev @testing-library/react

// src/Button.js
import React from 'react';

function Button({ onClick, children }) {
    return <button onClick={onClick}>{children}</button>;
}

export default Button;

// src/Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('calls onClick when button is clicked', () => {
    const handleClick = jest.fn();
    const { getByText } = render(<Button onClick={handleClick}>Click me</Button>);
    fireEvent.click(getByText('Click me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
});

Mocking Functions and Modules

Jest provides powerful mocking capabilities to mock functions and modules in your tests. This is useful for isolating the component or function being tested.


// Example of mocking a function
// src/api.js
export const fetchData = () => {
    return Promise.resolve('data');
};

// src/api.test.js
import { fetchData } from './api';

jest.mock('./api');

test('fetchData returns data', async () => {
    fetchData.mockResolvedValue('mock data');
    const data = await fetchData();
    expect(data).toBe('mock data');
});

Testing Asynchronous Code

Jest makes it easy to test asynchronous code. You can use async/await, Promises, or callbacks to handle asynchronous operations in your tests.


// Example of testing asynchronous code
// src/fetchData.js
export const fetchData = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('data');
        }, 1000);
    });
};

// src/fetchData.test.js
import { fetchData } from './fetchData';

test('fetchData returns data', async () => {
    const data = await fetchData();
    expect(data).toBe('data');
});

Running Tests

To run your tests, use the test script defined in your package.json file.


// Run Jest tests
npm test

You can also use additional Jest CLI options to run specific tests, watch files for changes, and generate coverage reports.


// Run specific tests
npx jest src/sum.test.js

// Watch files for changes
npx jest --watch

// Generate coverage report
npx jest --coverage

Summary

In this tutorial, you learned about writing unit tests with Jest, including setting up Jest, writing tests, testing React components, mocking functions and modules, and testing asynchronous code. Jest is a powerful testing framework that makes it easy to ensure your React components and functions work as expected.

React - Unit Testing with Jest