Mastering Component Unit Testing with Jest and Testing Library

Significance of Unit Testing

Components are frequently reused; bugs affect many business areas, so ensuring reliability of each iteration is crucial. Rich unit tests indicate reliability for users, and give developers confidence when modifying old code.

Jest Basics

Jest is the recommended testing framework for React and the default choice for many front‑end component libraries.

Simple example:

function sum(num1, num2) {
    return num1 + num2;
}

Corresponding test:

import sum from './sum.ts';

describe('util method test', () => {
    test("sum function test", () => {
        // expect sum(1,2) to be 3
        expect(sum(1, 2)).toBe(3);
    });
});

Explanation of Jest concepts: describe , test , expect , toBe , etc.

Jest Concepts

describe : group a module.

describe('buttonPromise component tests', () => {
    // write test cases here
});

test : define a specific test case.

describe('buttonPromise component tests', () => {
    test('describe test: buttonPromise loading style', () => {
        // execute test
    });
});

expect : assertion.

toBe : matcher for exact equality.

Common matchers include toBeGreaterThan, toBeLessThan, toEqual, toMatch, toHaveBeenCalledTimes, etc.

Jest Capabilities

Assertions and matchers to evaluate test results.

Support for asynchronous function testing.

Mocking capabilities for functions and modules.

Example of mocking axios:

import axios from 'axios';
jest.mock('axios', () => {
    return {
        get: jest.fn(() => Promise.resolve(1))
    };
});
test('mock axios', () => {
    return axios.get('').then(data => expect(data).toBe(1));
});

Additional Tools for UI Component Testing

Beyond Jest, libraries such as @testing-library/react, @testing-library/user-event, and @testing-library/jest-dom simplify rendering, DOM interaction, and user event simulation.

@testing-library/react

Provides rendering and DOM utilities for React components.

import { render } from '@testing-library/react';
import ButtonPromise from '../src';

describe('ButtonPromise component test', () => {
    test('test loading feature', async () => {
        const { container } = render(<ButtonPromise id="test-copy-icon" onClick={btnClick}>Button</ButtonPromise>);
        const btn = container.querySelector('#test-copy-icon');
        // further actions
    });
});

@testing-library/user-event

Simulates user interactions such as clicks.

const user = userEvent.setup();
user.click(btn);

@testing-library/jest-dom

Enables DOM assertions like toHaveClass.

await waitFor(() => {
    expect(btn).toHaveClass('arco-btn-loading');
});

Unit Test Strategy

Define clear test objectives.

Write one purpose per test.

Think from the user’s perspective.

Skip testing of basic component behavior already guaranteed by the underlying library.

Workflow Example

Test files reside in __tests__ folder, e.g., component.test.tsx:

import { render } from '@testing-library/react';
import Component from '../src';

describe('Component name', () => {
    test('feature 1', () => {
        // test code
    });
    test('feature 2', () => {
        // test code
    });
});

Run yarn test to see results. Successful and failing screenshots are shown below.

Further Resources

Jest official documentation

React Testing Library