Testing components is a great way to ensure that your React application works as expected. This is especially useful when there are continuous changes to components that may break things. With proper tests, we can be confident that our application is always ready for deployment.

 is a lightweight library that allows testing your React components. This library does not care about implementation details of your components. Instead, it checks the DOM that got rendered and modified by your application. This way testing logic is similar to actions performed by a regular user. In tests, we can render a component, initiate events such as text input or button clicks and observe results in a DOM, just like a user would. We can refactor a component any way we want as long as it keeps the same behavior, tests will just keep working.

 packages, and provides easy to use helper functions for writing tests. It does not depend on any testing framework. React Testing Library renders a component in a virtual DOM and inspects DOM nodes afterward. For example, we can search for a text field with a specific text or a button with a specific attribute, but not a React component instance. If a component depends on an external feature we can mock this feature using our testing framework of choice.

Let's start by adding React Testing Library to a project:

# add with npm
npm install --save-dev @testing-library/react
# or with yarn
yarn add --dev @testing-library/react

While React Testing Library does not depend on any particular testing framework, we'll be using 

. This is a popular testing framework that works great with React. Additionally, we'll add the 

. They simplify writing tests that assert various things about the state of a DOM.

# add with npm
npm install --save-dev @testing-library/jest-dom
# or with yarn
yarn add --dev @testing-library/jest-dom

Before creating any tests, let's look at our component. It will be a simple form that provides a text input and a submit button. On submit we display a thank you message and disable the submit button:

import React, { useState } from "react";

export default function MyComponent() {
  const [text, setText] = useState("");
  const [submited, setSubmited] = useState(false);

  const handleChange = event => {
    setText(event.target.value);
  };

  const handleSubmit = () => {
    setSubmited(true);
  };

  return (
    <div>
      <strong>Please enter some text</strong>
      <label htmlFor="text">Text:</label>
      <input id="text" value={text} onChange={handleChange} />
      <button disabled={submited} onClick={handleSubmit}>
        Submit
      </button>
      {submited && <strong>Thank you for {text}</strong>}
    </div>
  );
}

We've defined our component as a functional component here, but it can be a class as well. The React Testing Library does not care about the implementation details of a component, only the final DOM that got rendered matters.

Now we're ready to add our test. Let's create the 

import React from "react";
import { render } from "@testing-library/react";
import MyComponent from "./MyComponent";
import "@testing-library/jest-dom/extend-expect";

test("renders input form", () => {
  const { getByText, queryByText } = render(<MyComponent />);
  expect(getByText(/Please enter some text/i)).toBeInTheDocument();
  expect(getByText("Submit")).not.toBeDisabled();
  expect(queryByText(/Thank you!/i)).toBeNull();
});

This test does a couple of things. First, we import our 

 function from the React Testing Library. Next, in the test we use the 

 function to render the component into a virtual DOM. This function returns an object with a number of helper functions and objects that we can use. We leverage the 

 functions. They both return the DOM element by a specified text or regular expression. The difference is that the get function will throw an error if an element has not been found, the query function will return 

 instead. We can use get function when we're sure that the element should be available and it's ok to fail with an error otherwise.

 function we make sure that there is a welcome text available in the initial render (i.e. "Please enter some text"). Next, we make sure that there is a submit button available and that it is NOT disabled. Finally, we query for the thank you text to ensure that it's not available (as it should become available only after a submit).

This test will pass successfully and will work as long as the output of the component would stay the same.

Now, let's test a case when a user inputs some text and clicks on a submit button. The button should get disabled and a thank you message should be displayed. We'll describe exactly that in our test:

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import MyComponent from "./MyComponent";
import "@testing-library/jest-dom/extend-expect";

test("accepts text and displays thank you message", () => {
  const { getByText, getByLabelText } = render(<MyComponent />);

  const testText = "some data";

  // fill out the form
  fireEvent.change(getByLabelText(/text/i), {
    target: { value: testText }
  });

  fireEvent.click(getByText(/Submit/i));

  expect(getByText("Submit")).toBeDisabled();
  expect(getByText("Thank you for " + testText)).toBeInTheDocument();
});

Note that now we're additionally importing the 

 from the React Testing Library that we'll use to work with our form. We use 

 functions to input text and emulate a click on a button. After that, we test against the DOM to make sure that the button has been disabled and that the thank you text is visible.

React Testing Library is an easy to use library that makes writing tests for your React components a pleasant task. It concentrates on the DOM generated by your components and not on internal implementation details, which simplifies refactoring and future modifications. This library does not depend on any testing framework, so you are free to use any test framework you like.

<h1 data-node-type="titlePlaceholder">How to Start Using React Testing Library</h1><p>Testing components is a great way to ensure that your React application works as expected. This is especially useful when there are continuous changes to components that may break things. With proper tests, we can be confident that our application is always ready for deployment.</p><p>The <a href="https://github.com/testing-library/react-testing-library" rel="noopener noreferrer nofollow">React Testing Library</a> is a lightweight library that allows testing your React components. This library does not care about implementation details of your components. Instead, it checks the DOM that got rendered and modified by your application. This way testing logic is similar to actions performed by a regular user. In tests, we can render a component, initiate events such as text input or button clicks and observe results in a DOM, just like a user would. We can refactor a component any way we want as long as it keeps the same behavior, tests will just keep working.</p><p>The React Testing Library uses standard <code>react-dom</code> and <code>react-dom/test-utils</code> packages, and provides easy to use helper functions for writing tests. It does not depend on any testing framework. React Testing Library renders a component in a virtual DOM and inspects DOM nodes afterward. For example, we can search for a text field with a specific text or a button with a specific attribute, but not a React component instance. If a component depends on an external feature we can mock this feature using our testing framework of choice.</p><h2>Setting up React Testing Library</h2><p>Let's start by adding React Testing Library to a project:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-9GJgu" id="cm-9GJgu"># add with npm
npm install --save-dev @testing-library/react
# or with yarn
yarn add --dev @testing-library/react</textarea><p>While React Testing Library does not depend on any particular testing framework, we'll be using <a href="https://jestjs.io/" rel="noopener noreferrer nofollow">Jest</a>. This is a popular testing framework that works great with React. Additionally, we'll add the <code>@testing-library/jest-dom</code> package that contains <a href="https://github.com/testing-library/jest-dom#custom-matchers" rel="noopener noreferrer nofollow">additional jest matchers</a>. They simplify writing tests that assert various things about the state of a DOM.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-f6Xgo" id="cm-f6Xgo"># add with npm
npm install --save-dev @testing-library/jest-dom
# or with yarn
yarn add --dev @testing-library/jest-dom</textarea><h2>Writing your first test</h2><p>Before creating any tests, let's look at our component. It will be a simple form that provides a text input and a submit button. On submit we display a thank you message and disable the submit button:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-9jmwr" id="cm-9jmwr">import React, { useState } from "react";

export default function MyComponent() {
  const [text, setText] = useState("");
  const [submited, setSubmited] = useState(false);

  const handleChange = event =&gt; {
    setText(event.target.value);
  };

  const handleSubmit = () =&gt; {
    setSubmited(true);
  };

  return (
    &lt;div&gt;
      &lt;strong&gt;Please enter some text&lt;/strong&gt;
      &lt;label htmlFor="text"&gt;Text:&lt;/label&gt;
      &lt;input id="text" value={text} onChange={handleChange} /&gt;
      &lt;button disabled={submited} onClick={handleSubmit}&gt;
        Submit
      &lt;/button&gt;
      {submited &amp;&amp; &lt;strong&gt;Thank you for {text}&lt;/strong&gt;}
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Ff1lxs&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Ff1lxs&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Ff1lxs%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We've defined our component as a functional component here, but it can be a class as well. The React Testing Library does not care about the implementation details of a component, only the final DOM that got rendered matters.<br>Now we're ready to add our test. Let's create the <code>MyComponent.test.js</code> file next to our <code>MyComponent.js</code> file:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-ySw5E" id="cm-ySw5E">import React from "react";
import { render } from "@testing-library/react";
import MyComponent from "./MyComponent";
import "@testing-library/jest-dom/extend-expect";

test("renders input form", () =&gt; {
  const { getByText, queryByText } = render(&lt;MyComponent /&gt;);
  expect(getByText(/Please enter some text/i)).toBeInTheDocument();
  expect(getByText("Submit")).not.toBeDisabled();
  expect(queryByText(/Thank you!/i)).toBeNull();
});</textarea><p>This test does a couple of things. First, we import our <code>MyComponent</code> component and we import the <code>render</code> function from the React Testing Library. Next, in the test we use the <code>render</code> function to render the component into a virtual DOM. This function returns an object with a number of helper functions and objects that we can use. We leverage the <code>getByText</code> and <code>queryByText</code> functions. They both return the DOM element by a specified text or regular expression. The difference is that the get function will throw an error if an element has not been found, the query function will return <code>null</code> instead. We can use get function when we're sure that the element should be available and it's ok to fail with an error otherwise.</p><p>Using the <code>getByText</code> function we make sure that there is a welcome text available in the initial render (i.e. "Please enter some text"). Next, we make sure that there is a submit button available and that it is NOT disabled. Finally, we query for the thank you text to ensure that it's not available (as it should become available only after a submit).<br>This test will pass successfully and will work as long as the output of the component would stay the same.</p><h2>Testing user actions</h2><p>Now, let's test a case when a user inputs some text and clicks on a submit button. The button should get disabled and a thank you message should be displayed. We'll describe exactly that in our test:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-5XnHF" id="cm-5XnHF">import React from "react";
import { render, fireEvent } from "@testing-library/react";
import MyComponent from "./MyComponent";
import "@testing-library/jest-dom/extend-expect";

test("accepts text and displays thank you message", () =&gt; {
  const { getByText, getByLabelText } = render(&lt;MyComponent /&gt;);

  const testText = "some data";

  // fill out the form
  fireEvent.change(getByLabelText(/text/i), {
    target: { value: testText }
  });

  fireEvent.click(getByText(/Submit/i));

  expect(getByText("Submit")).toBeDisabled();
  expect(getByText("Thank you for " + testText)).toBeInTheDocument();
});</textarea><p>Note that now we're additionally importing the <code>fireEvent</code> from the React Testing Library that we'll use to work with our form. We use <code>fireEvent.change</code> and <code>fireEvent.click</code> functions to input text and emulate a click on a button. After that, we test against the DOM to make sure that the button has been disabled and that the thank you text is visible.</p><h2>Summary</h2><p>React Testing Library is an easy to use library that makes writing tests for your React components a pleasant task. It concentrates on the DOM generated by your components and not on internal implementation details, which simplifies refactoring and future modifications. This library does not depend on any testing framework, so you are free to use any test framework you like.</p>

AUTHOR

Dmitry Rogozhny

Testing components is a great way to ensure that your React application works as expected. This is especially useful when there are continuous changes to components that may break things. With proper tests, we can be confident that our application is always ready for deployment. The React Testing…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How to Start Using React Testing Library

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript