React Integration Testing Tutorial: Step-by-Step Guide with Jest & React Testing Library

by

React is a popular JavaScript library for building user interfaces. Ensuring that your React components work correctly together is essential for maintaining a reliable application. Integration testing helps verify that multiple components function correctly when combined. This tutorial provides a step-by-step guide to performing integration tests in React using Jest and React Testing Library.

Prerequisites

  • Basic knowledge of React and JavaScript
  • Node.js and npm installed on your machine
  • React project set up with Create React App or similar
  • Jest and React Testing Library installed

If you haven’t installed the testing libraries yet, run:

npm install --save-dev @testing-library/react @testing-library/jest-dom

Setting Up the Testing Environment

Configure Jest to include React Testing Library’s custom matchers. In your setupTests.js file, add:

import '@testing-library/jest-dom';

Writing Your First Integration Test

Suppose you have two components: LoginForm and Dashboard. You want to test that after a successful login, the dashboard displays correctly.

Example Components

Here are simplified versions of the components:

LoginForm.js

import React, { useState } from 'react';

function LoginForm({ onLogin }) {

const [username, setUsername] = useState('');

const handleSubmit = (e) => {

e.preventDefault();

onLogin(username);

};

return (

type="text"

value={username}

onChange={(e) => setUsername(e.target.value)}

/>

);

}

Dashboard.js

import React from 'react';

function Dashboard({ username }) {

return

Welcome, {username}!

;

}

Creating the Integration Test

Create a test file, e.g., LoginFlow.test.js, and write the following test:

import { render, screen, fireEvent } from '@testing-library/react';

import React, { useState } from 'react';

import LoginForm from './LoginForm';

import Dashboard from './Dashboard';

function App() {

const [user, setUser] = useState(null);

const handleLogin = (username) => {

setUser(username);

};

return (

{user ? : }

);

}

test('full login flow displays dashboard', () => {

render();

const input = screen.getByRole('textbox');

const button = screen.getByText('Login');

fireEvent.change(input, { target: { value: 'JohnDoe' } });

fireEvent.click(button);

const greeting = screen.getByRole('heading');

expect(greeting).toHaveTextContent('Welcome, JohnDoe!');

Running the Tests

Execute the tests with the command:

npm test

The testing suite will run all tests, including your integration test, and display the results.

Conclusion

React integration testing is vital for verifying that multiple components work together seamlessly. Using Jest and React Testing Library simplifies writing reliable tests. By following this step-by-step guide, you can create comprehensive integration tests for your React applications, ensuring better quality and user experience.