Testing : How to Test A React Application

Photo by Lautaro Andreani on Unsplash

React is a popular JavaScript library that allows developers to build user interfaces for web applications. Testing plays a crucial role in the creation of software, and React apps are no different. This article will go over how to develop tests for React applications, the tools and packages you may use, as well as some typical problems you could run into. Also, we’ll look at how to develop testable code.

Tools and Libraries for Testing React Applications

There are several tools and libraries available for testing React applications, including:

Jest :

Facebook developed the well-known testing framework known as Jest. Snapshot testing, mocking, and code coverage are supported, and it is built from the ground up to work with React.

React Testing Library :

React Testing Library is a testing tool that enables you to replicate user interactions while testing your React components. It offers a straightforward and understandable API that makes writing tests simple.

Enzyme :

Another testing tool that enables you to test your React components is Enzyme. It offers a selection of testing tools that let you work with and navigate the DOM tree.

Cypress :

Cypress is an end-to-end testing framework that allows you to write tests that simulate user interactions with your application. It offers a straightforward and effective API that makes it simple to create tests that are inclusive of your entire application.

Examples of React Tests

Let’s take a look at some examples of React tests using Jest and React Testing Library.

Example 1: Testing a React Component

import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

test('renders a button', () => {
const { getByText } = render(<Button label="Click me" />);
const buttonElement = getByText(/Click me/i);
expect(buttonElement).toBeInTheDocument();
});

This test checks that a Button component renders correctly with the specific label.

Example 2: Testing an Event Handler

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

test('calls the onClick handler', () => {
const handleClick = jest.fn();
const { getByText } = render(<Button label="Click me" onClick={handleClick} />);
const buttonElement = getByText(/Click me/i);
fireEvent.click(buttonElement);
expect(handleClick).toHaveBeenCalled();
});

This test checks that the onClick handler is called when the button is clicked.

Example 3: Testing a Redux Store

import { createStore } from 'redux';
import rootReducer from './reducers';
import { addTodo, toggleTodo } from './actions';

describe('Todo App', () => {
it('should add and toggle todos', () => {
const store = createStore(rootReducer);

store.dispatch(addTodo('Buy milk'));
expect(store.getState().todos).toEqual([{ id: 1, text: 'Buy milk', completed: false }]);

store.dispatch(toggleTodo(1));
expect(store.getState().todos).toEqual([{ id: 1, text: 'Buy milk', completed: true }]);
});
});

This test checks that a Redux store that manages a list of todos correctly adds and toggles todos.

Example 4: Testing React Router

import { createMemoryHistory } from 'history';
import { Router, Route } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import Home from './Home';
import About from './About';

test('renders the correct component for the given route', () => {
const history = createMemoryHistory();
history.push('/about');

render(
    <Router history={history}>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    </Router>
);

expect(screen.getByText('About Page')).toBeInTheDocument();
});

This test checks that a React Router configuration correctly renders the About component when the /about route is accessed.

Example 5: Testing an API Call with Mocking

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import { render, screen, waitFor } from '@testing-library/react';
import { fetchUser } from './api';
import User from './User';

const server = setupServer(
    rest.get('/users/1', (req, res, ctx) => {
    return res(ctx.json({ id: 1, name: 'John Doe' }));
})
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('displays user data after API call', async () => {
render(<User userId={1} />);

await waitFor(() => screen.getByText('John Doe'));

expect(screen.getByText('ID: 1')).toBeInTheDocument();
expect(screen.getByText('Name: John Doe')).toBeInTheDocument();
});

Common Issues

When testing React applications, you could run into a number of typical problems, including:

Asynchronous code :

Asynchronous code, which can be challenging to test, is frequently used in React applications. Async/await or Promise-based tools like Jest provide asynchronous testing.

Stateful components:

Due to their potential for intricate interactions with the application’s state, stateful components can be challenging to test. Snapshot testing, which enables you to compare the current state of the component with a previously saved snapshot, is one method for testing stateful components.

Testing implementation details:

It’s crucial to evaluate your components’ functionality rather than the specifics of how they were implemented. Testing implementation details might weaken and make it hard to maintain your tests.

How to Write Testable Code

You should adhere to the following best practises to develop testable React code:

1. Make your components lean and focused because they are simpler to test and update.
2. Keep your state and UI separate: By keeping your state and UI separate, you can build tests that concentrate on the behaviour of your components rather than the specifics of their implementation.
3. Employ dependency injection to easily substitute dependencies with test doubles, which can speed up and improve the reliability of your tests.

Happy Testing !!!