Setting Up React Testing Library

Welcome to the first lesson on learning how to test your frontend React applications!

This course assumes you already know the basics of writing tests in Jest or Vitest (e.g., describe/it, assertions with expect, running tests).

If you don't, check out our free course covering the non-React/front-end-specific Jest/Vitest fundamentals first.

In this test environment you can read the lesson (as you are doing now), and there is also a test runner (use the tabs above).

When you run tests, we execute them with our test runner which works just like Jest or Vitest.

As most tests in this course render a React component, you can view the component after running tests - this can be useful for debugging or seeing how it renders in a browser.

Most lessons include example code you will need to update to make the tests pass. If you're struggling, there are hints, and you can view the completed solution from the code editor's menu.

Normally, you won't have to update the component under test - you should only update the test itself so that it passes.

If you are following along on this website, you can run the example code in the code editor (use the tabs above).

If you are setting up React Testing Library on a local project, here is a step by step of what you need to do.

Installing/quick set up guide for React Testing Library

For this guide I will assume you already have Jest or Vitest setup. If not, see our other free course on Jest/Vitest.

To start with React Testing Library, install the core package:

yarn add --dev @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom

If you are using Typescript, then add this to your tsconfig so you get the correct typings for the jest-dom matchers (We cover this in detail in a lesson in this course btw)

{
  "compilerOptions": {
    "types": [
      "@testing-library/jest-dom"
    ]
  }
}

In your Jest or Vitest setup file, add the jest-dom matchers.

Despite its name (jest-dom), you can use this with both Jest and Vitest, although their setup differs slightly:

If you use Jest, either add this to your Jest set up file:

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

Or in your jest config, in setupFilesAfterEnv you can import it directly ['@testing-library/jest-dom']

If you use vitest test.setupFiles file, add this:

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

Mocking fetch

It is very common to want to mock fetch. There are a few approaches (including using Mock Server Worker), but the simplest is to use a testing library tool to completely mock it out.

This is covered in more detail in an upcoming lesson

Eslint

I'd recommend adding a couple of eslint plugins too:

yarn add --dev eslint-plugin-testing-library eslint-plugin-jest-dom

Then in your eslint config file (.eslintrc.js):

module.exports = {
  plugins: [
    'jest-dom',
    'testing-library',
  ],
  extends: [
    'plugin:testing-library/react',
    'plugin:jest-dom/recommended',
  ],
};

If you want an example file to check your tests can render React components, use this .

Lesson Task

The test code is set up to pass. Click the Run button (use the tabs above ), then go to the next lesson.

Ready to try running tests for this lesson?