A Beginner’s Guide to Testing React Components with Jest and @testing-library/react

Testing is a fundamental part of building reliable software, and it’s essential for ensuring that our applications work as expected. In this tutorial, we’ll dive into using Jest and @testing-library/react to test React components, with a focus on basic testing techniques.

What is Jest?

Jest is a popular JavaScript testing framework developed by Facebook. It allows developers to write unit tests, integration tests, and snapshot tests. Jest is known for its simplicity and powerful features, such as mocking, test coverage, and parallel test execution.

What is @testing-library/react?

@testing-library/react is a library that enables you to test React components with a focus on simulating real user interactions. Instead of testing implementation details, @testing-library encourages tests that ensure your components behave as expected from the user’s perspective.

Setting Up Jest and @testing-library/react

To get started, install both Jest and @testing-library/react:

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

Once installed, add a test script to your package.json to run Jest:

"scripts": {
  "test": "jest"
}

Now you’re ready to write tests!

Writing Your First Test

Let’s create a simple React component:

// Button.js
import React from 'react';

const Button = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

Next, let’s write a test to check if the button renders the correct label:

// Button.test.js
import { render, screen } from '@testing-library/react';
import Button from './Button';

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

Here’s a breakdown of what’s happening:

• render(): Renders the component to a virtual DOM.

• screen: An object that provides queries to access elements.

• getByText(): A query that returns the element by its text content.

• expect(): The assertion function that checks if the element exists in the document.

Testing User Interactions

To simulate user interactions, we can use fireEvent from @testing-library/react. Let’s extend our Button component to handle clicks:

// Button.js
import React, { useState } from 'react';

const Button = ({ label }) => {
  const [clicked, setClicked] = useState(false);

  return (
    <button onClick={() => setClicked(true)}>
      {clicked ? 'Clicked!' : label}
    </button>
  );
};

export default Button;

Now, let’s write a test that simulates a click event:

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

test('button text changes after click', () => {
  render(<Button label="Click Me" />);
  const buttonElement = screen.getByText(/Click Me/i);
  fireEvent.click(buttonElement);
  expect(screen.getByText(/Clicked!/i)).toBeInTheDocument();
});

In this test:

• fireEvent.click() simulates a click on the button.

• After clicking, we assert that the button text has changed to "Clicked!"

Running Tests

To run your tests, simply use the following command:

npm test

Jest will run all your tests and give you feedback on whether they pass or fail.

Conclusion

This guide covers the basics of using Jest and @testing-library/react for testing React components. With this foundation, you can start writing more advanced tests and ensure that your React applications are bug-free and easy to maintain.

If you want to dive deeper into testing, check out the official documentation for Jest and @testing-library/react. Happy testing!