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

.

<code>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);
  });
});
</code>

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()

<code>// 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');
</code>

2.3.2 jest.mock()

Use

jest.mock()

to replace modules such as network requests with mock implementations.

<code>// 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));
});
</code>

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.

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

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

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

).

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

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.