Master Frontend Component Testing with Jest and React Testing Library

1. Background

When I was a student, I thought testing was just writing test cases, assertions, running them, and checking coverage. Later, when I needed to add unit tests to a component library, I realized it wasn't that simple.

1.1 Purpose of unit testing

Control impact of code changes during frequent requirement changes

Improve code quality and development efficiency

Ensure code remains clean and clear

…

In short, unit testing is a powerful way to guarantee product quality.

1.2 Testing frameworks and UI component testing tools

Popular JavaScript testing frameworks include Jest, Jasmine, Mocha, and UI component testing tools such as Testing Library and Enzyme. In our project we use Jest + React Testing Library.

1.3 Things to consider when testing components

Whether the component renders according to specified conditions/logic

Whether event callbacks work correctly

How to verify asynchronous interfaces

How to verify actions after async execution

…

Depending on the business scenario, additional factors may be needed.

2. Using Jest

Jest is installed by default in projects created with create‑react‑app.

2.1 Basic Jest API

The three most common Jest functions are describe, test (or it) and expect.

import aFunction from './function.js';

// aFunction returns the boolean argument
describe('a example test suite', () => {
  test('function return true', () => {
    expect(aFunction(true)).toBe(true);
  });
  test('function return false', () => {
    expect(aFunction(false)).toBe(false);
  });
});

Run all tests with npm run jest or a specific file with npm run jest -t somefile.test.tsx. Use jest --coverage for coverage reports.

Install the VS Code extension “Jest Runner” to run tests quickly.

2.2 Jest matchers

Matchers are used with expect to assert values, e.g. toBe() checks strict equality.

Testing Library also provides component‑specific matchers such as toBeInTheDocument, toHaveAttribute, etc.

2.3 Jest Mock

Mocking helps isolate the unit under test. Common APIs are jest.fn() and jest.mock().

2.3.1 jest.fn()

// mock function without implementation
const mockFn = jest.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toBeCalledTimes(2);
expect(mockFn).toHaveBeenCalledWith('a', 'b', 'c');

// mock with implementation
const returnsTrue = jest.fn(() => true);
console.log(returnsTrue()); // true

// mock returning a value
const returnSomething = jest.fn().mockReturnValue('hello world');
expect(returnSomething()).toBe('hello world');

// mock returning a promise
const promiseFn = jest.fn().mockResolvedValue('hello promise');
const promiseRes = await promiseFn();
expect(promiseRes).toBe('hello promise');

2.3.2 jest.mock()

Use jest.mock() to replace modules such as network requests with mock implementations.

// users.js
import axios from 'axios';
class Users {
  static all() {
    return axios.get('.../users.json').then(resp => resp.data);
  }
}
export default Users;

// users.test.js
import axios from 'axios';
import Users from './users';
jest.mock('axios');

test('should fetch users', () => {
  const users = [{ name: 'Bob' }];
  const resp = { data: users };
  axios.get.mockResolvedValue(resp);
  return Users.all().then(data => expect(data).toEqual(users));
});

2.4 Additional resources

Jest learning guide

Missed React component unit testing

Jest testing JavaScript (Mock)

3. React Testing Library

RTL focuses on testing components the way users interact with them.

The more your tests resemble the way your software is used, the more confidence they can give you.

3.1 render & debug

Use render to mount a component in a test and debug or screen.debug to output its HTML.

import { render, screen } from '@testing-library/react';
import Dropdown from '../index';

describe('dropdown test', () => {
  it('render Dropdown', () => {
    const comp = render(<Dropdown />);
    comp.debug();
    screen.debug();
  });
});

3.2 screen

screen

provides a global DOM for queries and assertions.

3.3 Querying elements

RTL offers three query families: getBy…, queryBy… and findBy…. getBy throws when the element is missing, queryBy returns null, and findBy works with async elements.

Typical queries include getByText, getByRole, getByLabelText, getByPlaceholderText, getByAltText, getByTestId, etc.

3.4 RTL + jest‑dom

The jest-dom package adds custom matchers like toBeDisabled, toBeInTheDocument, toHaveAttribute, and many others.

3.5 fireEvent

Simulate user interactions with fireEvent (or its shortcuts such as fireEvent.click).

fireEvent(element, new MouseEvent('click', { bubbles: true, cancelable: true }));
// shortcut
fireEvent.click(element);

Common events include keyboard ( keyDown, keyPress, keyUp), focus ( focus, blur), form ( change, submit), and mouse ( click, dblClick).

4. Conclusion

Testing is essential for maintaining product quality amid changing requirements. While testing adds effort, tools like Jest and RTL help front‑end developers write reliable tests, reduce manual debugging, and increase confidence when releasing new features.