1 of 12

Testing Input

🎹 Testing Input

Example

Full Example

See the following sections for a detailed breakdown of the test

We recommend using Mock Service Worker library to declaratively mock API communication in your tests instead of stubbing window.fetch, or relying on third-party adapters.

Step-By-Step

Imports

Mock

Use the setupServer function from msw to mock an API request that our tested component makes.

Arrange

The render method renders a React element into the DOM.

Act

The fireEvent method allows you to fire events to simulate user actions.

Assert

System Under Test

Cheatsheet

Get the printable cheat sheet

A short guide to all the exported functions in React Testing Library

render const {/* */} = render(Component) returns:
- unmount function to unmount the component
- container reference to the DOM node where the component is mounted
- all the queries from DOM Testing Library, bound to the document so there is no need to pass a node as the first argument (usually, you can use the screen import instead)

Queries

Difference from DOM Testing Library
The queries returned from render in React Testing Library are the same as DOM Testing Library except they have the first argument bound to the document, so instead of getByText(node, 'text') you do getByText('text')

See Which query should I use?

No Match

1 Match

1+ Match

Await?

ByLabelText find by label or aria-label text content
- getByLabelText
- queryByLabelText

Async

The dom-testing-library Async API is re-exported from React Testing Library.

waitFor (Promise) retry the function within until it stops throwing or times out
waitForElementToBeRemoved (Promise) retry the function until it no longer returns a DOM node

Events

See Events API

fireEvent trigger DOM event: fireEvent(node, event)
fireEvent.* helpers for default event types
- click

Other

See Querying Within Elements, Config API, Cleanup,

within take a node and return an object with all the queries bound to the node (used to return the queries from React Testing Library's render method): within(node).getByText("hello")
configure change global options: configure({testIdAttribute: 'my-data-test-id'})

Text Match Options

Given the following HTML:

Will** find the div:**

// import dependencies
import React from "react";

// import API mocking utilities from Mock Service Worker
import { rest } from "msw";
import { setupServer } from "msw/node";

// import react-testing methods
import { render, fireEvent, waitFor, screen } from "@testing-library/react";

// add custom jest matchers from jest-dom
import "@testing-library/jest-dom";
// the component to test
import Fetch from "../fetch";

// declare which API requests to mock
const server = setupServer(
  // capture "GET /greeting" requests
  rest.get("/greeting", (req, res, ctx) => {
    // respond using a mocked JSON body
    return res(ctx.json({ greeting: "hello there" }));
  })
);

// establish API mocking before all tests
beforeAll(() => server.listen());
// reset any request handlers that are declared as a part of our tests
// (i.e. for testing one-time error scenarios)
afterEach(() => server.resetHandlers());
// clean up once the tests are done
afterAll(() => server.close());

// ...

test("handles server error", async () => {
  server.use(
    // override the initial "GET /greeting" request handler
    // to return a 500 Server Error
    rest.get("/greeting", (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  // ...
});

fireEvent.click(screen.getByText("Load Greeting"));

// wait until the `get` request promise resolves and
// the component calls setState and re-renders.
// `waitFor` waits until the callback doesn't throw an error

await waitFor(() =>
  // getByRole throws an error if it cannot find an element
  screen.getByRole("heading")
);

// assert that the alert message is correct using
// toHaveTextContent, a custom matcher from jest-dom.
expect(screen.getByRole("alert")).toHaveTextContent("Oops, failed to fetch!");

// assert that the button is not disabled using
// toBeDisabled, a custom matcher from jest-dom.
expect(screen.getByRole("button")).not.toBeDisabled();

import React, { useState, useReducer } from "react";
import axios from "axios";

const initialState = {
  error: null,
  greeting: null,
};

function greetingReducer(state, action) {
  switch (action.type) {
    case "SUCCESS": {
      return {
        error: null,
        greeting: action.greeting,
      };
    }
    case "ERROR": {
      return {
        error: action.error,
        greeting: null,
      };
    }
    default: {
      return state;
    }
  }
}

export default function Fetch({ url }) {
  const [{ error, greeting }, dispatch] = useReducer(
    greetingReducer,
    initialState
  );
  const [buttonClicked, setButtonClicked] = useState(false);

  const fetchGreeting = async (url) =>
    axios
      .get(url)
      .then((response) => {
        const { data } = response;
        const { greeting } = data;
        dispatch({ type: "SUCCESS", greeting });
        setButtonClicked(true);
      })
      .catch((error) => {
        dispatch({ type: "ERROR", error });
      });

  const buttonText = buttonClicked ? "Ok" : "Load Greeting";

  return (
    <div>
      <button onClick={() => fetchGreeting(url)} disabled={buttonClicked}>
        {buttonText}
      </button>
      {greeting && <h1>{greeting}</h1>}
      {error && <p role="alert">Oops, failed to fetch!</p>}
    </div>
  );
}

fireEvent.click(node)

cleanup clears the DOM (use with afterEach to reset DOM between tests)

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

test("loads items eventually", async () => {
  render(<Page />);

  // Click button
  fireEvent.click(screen.getByText("Load"));

  // Wait for page to update with query text
  const items = await screen.findAllByText(/Item #[0-9]: /);
  expect(items).toHaveLength(10);
});

// Matching a string:
getByText("Hello World"); // full string match
getByText("llo Worl", { exact: false }); // substring match
getByText("hello world", { exact: false }); // ignore case

// Matching a regex:
getByText(/World/); // substring match
getByText(/world/i); // substring match, ignore case
getByText(/^hello world$/i); // full string match, ignore case
getByText(/Hello W?oRlD/i); // advanced regex

// Matching with a custom function:
getByText((content, element) => content.startsWith("Hello"));

import React, {
    useState
} from 'react'
import {
    render,
    fireEvent
} from '@testing-library/react'
function CostInput() {

const [ value, setValue ] = useState( '' ) removeDollarSign = value => ( value[ 0 ] === '$' ? value.slice( 1 ) : value ) getReturnValue = value => ( value === '' ? '' : `$${value}` ) handleChange = ev => {
        ev.preventDefault()
const inputtedValue = ev.currentTarget.value

const noDollarSign = removeDollarSign( inputtedValue ) if ( isNaN( noDollarSign ) ) return setValue( getReturnValue( noDollarSign ) )
    }
    return <input value = {
        value
    }
    aria - label = "cost-input"
    onChange = {
        handleChange
    }
    />}
const setup = () => {
const utils = render(<CostInput / > )
const input = utils.getByLabelText( 'cost-input' ) return {
    input,
    ...utils,
}
}
test( 'It should keep a $ in front of the input', () => {

const {
            input
        } = setup() fireEvent.change( input, {
            target: {
                value: '23'
            }
        } ) expect( input.value ).toBe( '$23' )
    } ) test( 'It should allow a $ to be in the input when the value is changed', () => {

const {
            input
        } = setup() fireEvent.change( input, {
            target: {
                value: '$23.0'
            }
        } ) expect( input.value ).toBe( '$23.0' )
    } ) test( 'It should not allow letters to be inputted', () => {

const {
                input
            } = setup() expect( input.value ).toBe( '' )
// empty before  fireEvent.change(input, {target: {value: 'Good Day'}})  expect(input.value).toBe('')
//empty after})test('It should allow the $ to be deleted', () => {
const {input} = setup()  fireEvent.change(input, {target: {value: '23'}})  expect(input.value).toBe('$23')
// need to make a change so React registers "" as a change  fireEvent.change(input, {target: {value: ''}})  expect(input.value).toBe('')})

export default {
  title: "Components/Accordion",
  component: AccordionComponent,
  argTypes: {
    theme: {
      name: "Theme",
    },
    closeOthers: {
      name: "One Panel Open At A Time",
    },
  },
};

const Template = (args) => <AccordionComponent {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  ...props,
};

argTypes: {
  title: {
    control: {
      type: 'text',
    },
  },
  subtitle: {
    control: {
      type: 'text',
    },
  },
  link: {
    control: 'boolean',
  },
  ctaType: {
    control: {
      type: 'inline-radio',
      options: ['ImageSlide', 'VideoSlide'],
    },
  },
},

import React from "react";
import MyComponent from "./index";
import { Data } from "./data";
import { MyComponent as MyComponentComposition } from "../../lib/composition";

const props = MyComponentComposition({ fields: Data });

export default {
  title: "Components/MyComponent",
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: "radio",
        options: ["white", "gray"],
      },
      defaultValue: "white",
    },
  },
};

const Template = (args) => <MyComponent {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  ...props,
};

...

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
  argTypes: {
    backgroundColor: {
      control: {
        type: 'radio',
        options: ['white', 'gray'],
      },
      defaultValue: 'white',
    },
  },
};

...

...

import { storybookCustomArgs, createStoryOptions } from 'src/lib/helpers';


const props = BulletedOverviewComposition(Data);

const itemsToShow = createStoryOptions(props.items);

export default {
  title: 'Components/Bulleted Overview',
  component: BulletedOverview,
  argTypes: {
    ...storybookCustomArgs(props, BulletedOverview, [], false),
    items: {
      name: 'How many items?',
      control: {
        type: 'select',
        options: {
          ...itemsToShow,
        },
      },
    },
  },
};

...

getByLabelText(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    selector?: string = '*',
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

getByTitle(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  title: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

// for/htmlFor relationship between label and form element id
<label for="username-input">Username</label>
<input id="username-input" />

// The aria-labelledby attribute with form elements
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />

// Wrapper labels
<label>Username <input /></label>

// Wrapper labels where the label text is in another child element
<label>
  <span>Username</span>
  <input />
</label>

// aria-label attributes
// Take care because this is not a label that users can see on the page,
// so the purpose of your input must be obvious to visual users.
<input aria-label="Username" />

// Multiple elements labelled via aria-labelledby
<label id="username">Username</label>
<input aria-labelledby="username" />
<span aria-labelledby="username">Please enter your username</span>

// Multiple labels with the same text
<label>
  Username
  <input />
</label>
<label>
  Username
  <textarea></textarea>
</label>

const button = screen.getByRole('button', {name: /disabled button/i})

// ❌
expect(button.disabled).toBe(true)
// error message:
//  expect(received).toBe(expected) // Object.is equality
//
//  Expected: true
//  Received: false

// ✅
expect(button).toBeDisabled()
// error message:
//   Received element is not disabled:
//     <button />

// ❌
act(() => {
  render(<Example />)
})

const input = screen.getByRole('textbox', {name: /choose a fruit/i})
act(() => {
  fireEvent.keyDown(input, {key: 'ArrowDown'})
})

// ✅
render(<Example />)
const input = screen.getByRole('textbox', {name: /choose a fruit/i})
fireEvent.keyDown(input, {key: 'ArrowDown'})

// ❌
// assuming you've got this DOM to work with:
// <label>Username</label><input data-testid="username" />
screen.getByTestId('username')

// ✅
// change the DOM to be accessible by associating the label and setting the type
// <label for="username">Username</label><input id="username" type="text" />
screen.getByRole('textbox', {name: /username/i})

// ❌
const {container} = render(<Example />)
const button = container.querySelector('.btn-primary')
expect(button).toHaveTextContent(/click me/i)

// ✅
render(<Example />)
screen.getByRole('button', {name: /click me/i})

// assuming we've got this DOM structure to work with
// <button><span>Hello</span> <span>World</span></button>

screen.getByText(/hello world/i)
// ❌ fails with the following error:
// Unable to find an element with the text: /hello world/i. This could be
// because the text is broken up by multiple elements. In this case, you can
// provide a function for your text matcher to make your matcher more flexible.

screen.getByRole('button', {name: /hello world/i})
// ✅ works!

TestingLibraryElementError: Unable to find an accessible element with the role "blah"

Here are the accessible roles:

  button:

  Name "Hello World":
  <button />

  --------------------------------------------------

<body>
  <div>
    <button>
      <span>
        Hello
      </span>

      <span>
        World
      </span>
    </button>
  </div>
</body>

// ❌
await waitFor(() => {})
expect(window.fetch).toHaveBeenCalledWith('foo')
expect(window.fetch).toHaveBeenCalledTimes(1)

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)

// ❌
await waitFor(() => {
  expect(window.fetch).toHaveBeenCalledWith('foo')
  expect(window.fetch).toHaveBeenCalledTimes(1)
})

// ✅
await waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))
expect(window.fetch).toHaveBeenCalledTimes(1)

// ❌
await waitFor(() => {
  fireEvent.keyDown(input, {key: 'ArrowDown'})
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})

// ✅
fireEvent.keyDown(input, {key: 'ArrowDown'})
await waitFor(() => {
  expect(screen.getAllByRole('listitem')).toHaveLength(3)
})

ByPlaceholderText

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

getByPlaceholderText, queryByPlaceholderText, getAllByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText

API

getByPlaceholderText(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

This will search for all elements with a placeholder attribute and find one that matches the given TextMatch.

Note
A placeholder is not a good substitute for a label so you should generally use getByLabelText instead.

Options

TextMatch options

Migrate from Enzyme

This page is intended for developers who have experience with Enzyme and are trying to understand how to migrate to React Testing Library. It does not go into great detail about how to migrate all types of tests, but it does have some helpful information for those who are comparing Enzyme with React Testing Library.

What is React Testing Library?

React Testing Library is part of an open-source project named Testing Library. There are several other helpful tools and libraries in the Testing Library project which you can use to write more concise and useful tests. Besides React Testing Library, here are some of the project's other libraries that can help you along the way:

: jest-dom provides a set of custom Jest matchers that you can use to extend Jest. These make your tests more declarative, clearer to read, and easier to maintain.
: user-event tries to simulate the real events that happen in the browser as the user interacts with elements on the page. For example, userEvent.click(checkbox) would change the state of the checkbox.

Why should I use React Testing Library?

Enzyme is a powerful test library, and its contributors did a lot for the JavaScript community. In fact, many of the React Testing Library maintainers used and contributed to Enzyme for years before developing and working on React Testing Library. So we want to say thank you to the contributors of Enzyme!

The primary purpose of React Testing Library is to increase confidence in your tests by testing your components in the way a user would use them. Users don't care what happens behind the scenes, they just see and interact with the output. Instead of accessing the components' internal APIs or evaluating their state, you'll get more confidence by writing your tests based on the component output.

React Testing Library aims to solve the problem that many developers face when writing tests with Enzyme, which allows (and encourages) developers to test . Tests which do this ultimately prevent you from modifying and refactoring the component without changing its tests. As a result, the tests slow down development speed and productivity. Every small change may require rewriting some part of your tests, even if the change does not affect the component's output.

Rewriting your tests in React Testing library is worthwhile because you'll be trading tests that slow you down for tests that give you more confidence and increase your productivity in the long run.

How to migrate from Enzyme to React Testing Library?

To ensure a successful migration, we recommend doing it incrementally by running the two test libraries side by side in the same application, porting your Enzyme tests to React Testing Library one by one. That makes it possible to migrate even large and complex applications without disrupting other business because the work can be done collaboratively and spread out over time.

Install React Testing Library

First, install React Testing Library and the jest-dom helper library (you can check this page for the complete installation and setup guide).

Import React Testing Library to your test

If you're using Jest (you can use other test frameworks), then you only need to import the following modules into your test file:

The test structure can be the same as you would write with Enzyme:

Note: you can also use describe and it blocks with React Testing Library. React Testing Library doesn't replace Jest, just Enzyme. We recommend test because it helps with this: .

Basic Enzyme to React Testing Library migration examples

One thing to keep in mind is that there's not a one-to-one mapping of Enzyme features to React Testing Library features. Many Enzyme features result in inefficient tests anyway, so some of the features you're accustomed to with Enzyme need to be left behind (no more need for a wrapper variable or wrapper.update() calls, etc.).

React Testing Library has helpful queries which let you access your component's elements and their properties. We'll show some typical Enzyme tests along with alternatives using React Testing Library.

Let's say we have a Welcome component which shows a welcome message. We will have a look at both Enzyme and React Testing Library tests to learn how we can test this component:

React Component

The following component gets a name from props and shows a welcome message in an h1 element. It also has a text input which users can change to a different name, and the template updates accordingly. Check the live version on .

Test 1: Render the component, and check if the `h1` value is correct

Enzyme test

React Testing library

As you can see, the tests are pretty similar. Enzyme's shallow renderer doesn't render sub-components, so React Testing Library's render method is more similar to Enzyme's mount method.

In React Testing Library, you don't need to assign the render result to a variable (i.e. wrapper). You can simply access the rendered output by calling functions on the screen object. The other good thing to know is that React Testing Library automatically cleans up the environment after each test so you don't need to call cleanup in an afterEach or beforeEach function.

The other thing that you might notice is getByRole which has 'heading' as its argument. 'heading' is the accessible role of the h1 element. You can learn more about them on the queries documentation page. One of the things people quickly learn to love about Testing Library is how it encourages you to write more accessible applications (because if it's not accessible, then it's harder to test).

Test 2: Input texts must have correct value

In the component above, the input values are initialized with the props.firstName and props.lastName values. We need to check whether the value is correct or not.

Enzyme

React Testing Library

Cool! It's pretty simple and handy, and the tests are clear enough that we don't need to talk much about them. Something that you might notice is that the <form> has a role="form" attribute, but what is it?

role is one of the accessibility-related attributes that is recommended to use to improve your web application for people with disabilities. Some elements have default role values and you don't need to set one for them, but some others like <div> do not have default role values. You can use different approaches to access the <div> element, but we recommend trying to access elements by their implicit role to make sure your component is accessible by people with disabilities and those using screen readers. This section of the query documentation might help you understand the concepts better.

A <form> element must have a name attribute in order to have an implicit role of 'form' (as required by the specification).

React Testing Library aims to test the components how users use them. Users see buttons, headings, forms and other elements by their role, not by their id, class, or element tag name. Therefore, when you use React Testing Library you should avoid accessing the DOM with the document.querySelector API. (You can use it in your tests, but it's not recommended for the reasons stated in this paragraph.)

React Testing Library exposes some handy query APIs which help you access the component elements efficiently. You can see the list of available queries here. If you're not sure which query you should use in a given situation, we have a great page which explains which query to use, so check it out!

If you still have a question about which of React Testing Library's queries to use, then check out and the accompanying Chrome extension which aims to enable developers to find the best query when writing tests. It also helps you find the best queries to select elements. It allows you to inspect the element hierarchies in the Chrome Developer Tools and provides you with suggestions on how to select them, all while encouraging good testing practices.

Using act() and wrapper.update()

When testing asynchronous code in Enzyme, you usually need to call act() to run your tests correctly. When using React Testing Library, you don't need to explicitly call act() most of the time because it wraps API calls with act() by default.

update() syncs the Enzyme component tree snapshot with the React component tree, so you may see wrapper.update() in Enzyme tests. React Testing Library does not have (or need) a similar method, which is good for you since you need to handle fewer things!

Simulate user events

There are two ways to simulate user events with React Testing Library. One way is to use the user-event library, and the other way is to use fireEvent which is included in React Testing Library. user-event is actually built on top of fireEvent (which simply calls dispatchEvent on the given element). user-event is generally recommended because it ensures that all the events are fired in the correct order for typical user interactions. This helps ensure your tests resemble the way your software is actually used.

To use the @testing-library/user-event module, first install it:

Now you can import it into your test:

To demonstrate how to use the user-event library, imagine we have a Checkbox component which shows a checkbox input and an associated label. We want to simulate the event of a user clicking the checkbox:

We want to test that when a user clicks on the checkbox's associated label, the input's "checked" property is properly set. Let's see how we might write a test for that case:

Nice!

Triggering class methods in tests (`wrapper.instance()`)

As we already discussed, we recommend against testing implementation details and things that users will not be aware of. We aim to test and interact with the component more like how our users would.

If your test uses `instance()` or `state()`, know that you're testing things that the user couldn't possibly know about or even care about, which will take your tests further from giving you confidence that things will work when your user uses them. —

If you're unsure how to test something internal to your component, then take a step back and consider: "What would the user do to trigger this code to run?" Then make your test do that.

How to `shallow` render a component?

In general, you should avoid mocking out components. However, if you need to, then try using . For more information, see the FAQ.

Testing

https: //testing-playground.com/gist/7c68f0970c4ad5e2e1342390f4dea70c/64c2420ce9169f440cb8810b7ce438f53c766cef

[A clear way to unit testing React JS components using Jest and React Testing Library](https: //www.richardkotze.com/coding/react-testing-library-jest) by [Richard Kotze](https: //github.com/rkotze)
[Integration testing in React](https: //medium.com/@jeffreyrussom/integration-testing-in-react-21f92a55a894) by [Jeffrey Russom](https: //github.com/qswitcher)
[React Testing Library have fantastic testing 🐐](https: //medium.com/yazanaabed/react-testing-library-have-a-fantastic-testing-198b04699237) by [Yazan Aabed](https: //github.com/YazanAabeed)
[Building a React Tooltip Library](https: //www.youtube.com/playlist?list=PLMV09mSPNaQmFLPyrfFtpUdClVfutjF5G) by [divyanshu013](https: //github.com/divyanshu013) and [metagrover](https: //github.com/metagrover)
[A sample repo using React Testing Library to test a Relay Modern GraphQL app](https: //github.com/zth/relay-modern-flow-jest-example)
[Creating Readable Tests Using React Testing Library](https: //medium.com/flatiron-labs/creating-readable-tests-using-react-testing-library-2bd03c49c284) by [Lukeghenco](https: //github.com/Lukeghenco)
[My Experience moving from Enzyme to React Testing Library](https: //medium.com/@boyney123/my-experience-moving-from-enzyme-to-react-testing-library-5ac65d992ce) by [David Boyne](https: //github.com/boyney123)
[Testing Formik with React Testing Library](https: //scottsauber.com/2019/05/25/testing-formik-with-react-testing-library/) by [Scott Sauber](https: //github.com/scottsauber)
[How to Test Asynchronous Methods](https: //www.polvara.me/posts/how-to-test-asynchronous-methods/) by [Gpx](https: //twitter.com/Gpx)
[Writing better tests with react-testing-library](https: //www.youtube.com/watch?v=O0VxvRqgm7g) by [Billy Mathews](https: //twitter.com/BillRMathews)
[React Hooks broke my tests, now what?](https: //youtu.be/p3WS9GmfX_Q) by [Daniel Afonso](https: //twitter.com/danieljcafonso)
[Testing Apollo Components Using react-testing-library](https: //www.arahansen.com/testing-apollo-components-using-react-testing-library/) by [Andrew Hansen](https: //twitter.com/arahansen)

<button />

button

role

// import React so you can use JSX (React.createElement) in your test
import React from "react";

/**
 * render: lets us render the component as React would
 * screen: a utility for finding elements the same way the user does
 */
import { render, screen } from "@testing-library/react";

const Welcome = (props) => {
  const [values, setValues] = useState({
    firstName: props.firstName,
    lastName: props.lastName,
  });

  const handleChange = (event) => {
    setValues({ ...values, [event.target.name]: event.target.value });
  };

  return (
    <div>
      <h1>
        Welcome, {values.firstName} {values.lastName}
      </h1>

      <form name="userName">
        <label>
          First Name
          <input
            value={values.firstName}
            name="firstName"
            onChange={handleChange}
          />
        </label>

        <label>
          Last Name
          <input
            value={values.lastName}
            name="lastName"
            onChange={handleChange}
          />
        </label>
      </form>
    </div>
  );
};

export default Welcome;

test("has correct input value", () => {
  const wrapper = shallow(<Welcome firstName="John" lastName="Doe" />);
  expect(wrapper.find('input[name="firstName"]').value).toEqual("John");
  expect(wrapper.find('input[name="lastName"]').value).toEqual("Doe");
});

test("has correct input value", () => {
  render(<Welcome firstName="John" lastName="Doe" />);
  expect(screen.getByRole("form")).toHaveFormValues({
    firstName: "John",
    lastName: "Doe",
  });
});

import React from "react";

const Checkbox = () => {
  return (
    <div>
      <label htmlFor="checkbox">Check</label>
      <input id="checkbox" type="checkbox" />
    </div>
  );
};

export default Checkbox;

test("handles click correctly", async () => {
  render(<Checkbox />);
  const user = userEvent.setup();

  // You can also call this method directly on userEvent,
  // but using the methods from `.setup()` is recommended.
  await user.click(screen.getByText("Check"));

  expect(screen.getByLabelText("Check")).toBeChecked();
});

getByRole(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  role: TextMatch,
  options?: {
    exact?: boolean = true,
    hidden?: boolean = false,
    name?: TextMatch,
    description?: TextMatch,
    normalizer?: NormalizerFn,
    selected?: boolean,
    checked?: boolean,
    pressed?: boolean,
    current?: boolean | string,
    expanded?: boolean,
    queryFallbacks?: boolean,
    level?: number,
  }): HTMLElement

<body>
  <div role="tablist">
    <button role="tab" aria-selected="true">Native</button>
    <button role="tab" aria-selected="false">React</button>
    <button role="tab" aria-selected="false">Cypress</button>
  </div>
</body>

<body>
  <section>
    <button role="checkbox" aria-checked="true">Sugar</button>
    <button role="checkbox" aria-checked="false">Gummy bears</button>
    <button role="checkbox" aria-checked="false">Whipped cream</button>
  </section>
</body>

<body>
  <nav>
    <ul>
      <li>
        <a aria-expanded="false" aria-haspopup="true" href="..."
          >Expandable Menu Item</a
        >
        <ul>
          <li><a href="#">Submenu Item 1</a></li>
          <li><a href="#">Submenu Item 1</a></li>
        </ul>
      </li>
      <li><a href="#">Regular Menu Item</a></li>
    </ul>
  </nav>
</body>

<body>
  <section>
    <h1>Heading Level One</h1>
    <h2>First Heading Level Two</h2>
    <h3>Heading Level Three</h3>
    <div role="heading" aria-level="2">Second Heading Level Two</div>
  </section>
</body>

getByRole("heading", { level: 1 });
// <h1>Heading Level One</h1>

getAllByRole("heading", { level: 2 });
// [
//   <h2>First Heading Level Two</h2>,
//   <div role="heading" aria-level="2">Second Heading Level Two</div>
// ]

<body>
  <ul>
    <li role="alertdialog" aria-describedby="notification-id-1">
      <div><button>Close</button></div>
      <div id="notification-id-1">You have unread emails</div>
    </li>
    <li role="alertdialog" aria-describedby="notification-id-2">
      <div><button>Close</button></div>
      <div id="notification-id-2">Your session is about to expire</div>
    </li>
  </ul>
</body>

const rtl = require("@testing-library/react");

const customRender = (ui, options) =>
  rtl.render(ui, {
    myDefaultOption: "something",
    ...options,
  });

module.exports = {
  ...rtl,
  render: customRender,
};

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "my-ui-lib";
import { TranslationProvider } from "my-i18n-lib";
import defaultStrings from "i18n/en-x-default";

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  );
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

// re-export everything
export * from "@testing-library/react";

// override render method
export { customRender as render };

import React, { FC, ReactElement } from "react";
import { render, RenderOptions } from "@testing-library/react";
import { ThemeProvider } from "my-ui-lib";
import { TranslationProvider } from "my-i18n-lib";
import defaultStrings from "i18n/en-x-default";

const AllTheProviders: FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  );
};

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "wrapper">
) => render(ui, { wrapper: AllTheProviders, ...options });

export * from "@testing-library/react";
export { customRender as render };

import { queryHelpers, buildQueries } from "@testing-library/react";

// The queryAllByAttribute is a shortcut for attribute-based matchers
// You can also use document.querySelector or a combination of existing
// testing library utilities to find matching nodes for your query
const queryAllByDataCy = (...args) =>
  queryHelpers.queryAllByAttribute("data-cy", ...args);

const getMultipleError = (c, dataCyValue) =>
  `Found multiple elements with the data-cy attribute of: ${dataCyValue}`;
const getMissingError = (c, dataCyValue) =>
  `Unable to find an element with the data-cy attribute of: ${dataCyValue}`;

const [
  queryByDataCy,
  getAllByDataCy,
  getByDataCy,
  findAllByDataCy,
  findByDataCy,
] = buildQueries(queryAllByDataCy, getMultipleError, getMissingError);

export {
  queryByDataCy,
  queryAllByDataCy,
  getByDataCy,
  getAllByDataCy,
  findAllByDataCy,
  findByDataCy,
};

import { render, queries } from "@testing-library/react";
import * as customQueries from "./custom-queries";

const customRender = (ui, options) =>
  render(ui, { queries: { ...queries, ...customQueries }, ...options });

// re-export everything
export * from "@testing-library/react";

// override render method
export { customRender as render };

import { render, queries, RenderOptions } from "@testing-library/react";
import * as customQueries from "./custom-queries";
import { ReactElement } from "react";

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "queries">
) => render(ui, { queries: { ...queries, ...customQueries }, ...options });

export * from "@testing-library/react";
export { customRender as render };

module.exports = {
  moduleDirectories: [
    'node_modules',
+   // add the directory with the test-utils.js file, for example:
+   'utils', // a utility folder
+    __dirname, // the root directory
  ],
  // ... other options ...
}

JEST

The problem

You want to use [jest][] to write tests that assert various things about the state of a DOM. As part of that goal, you want to avoid all the repetitive patterns that arise in doing so. Checking for an element's attributes, its text content, its css classes, you name it.

This solution

The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

Installation
Usage
- With TypeScript

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's devDependencies:

for installation with package manager.

Note: We also recommend installing the jest-dom eslint plugin which provides auto-fixable lint rules that prevent false positive tests and improve test readability by ensuring you are using the right matchers in your tests. More details can be found at .

Usage

Import @testing-library/jest-dom once (for instance in your ) and you're good to go:

With TypeScript

If you're using TypeScript, make sure your setup file is a .ts and not a .js to include the necessary types.

You will also need to include your setup file in your tsconfig.json if you haven't already:

Custom matchers

@testing-library/jest-dom can work with any library or framework that returns DOM elements from queries. The custom matcher examples below are written using matchers from @testing-library's suite of libraries (e.g. getByTestId, queryByTestId, getByText, etc.)

`toBeDisabled`

This allows you to check whether an element is disabled from the user's perspective. According to the specification, the following elements can be : button, input, select, textarea, optgroup, option, fieldset, and custom elements.

This custom matcher considers an element as disabled if the element is among the types of elements that can be disabled (listed above), and the disabled attribute is present. It will also consider the element as disabled if it's inside a parent form element that supports being disabled and has the disabled attribute present.

Examples

This custom matcher does not take into account the presence or absence of the aria-disabled attribute. For more on why this is the case, check .

`toBeEnabled`

This allows you to check whether an element is not disabled from the user's perspective.

It works like not.toBeDisabled(). Use this matcher to avoid double negation in your tests.

This custom matcher does not take into account the presence or absence of the aria-disabled attribute. For more on why this is the case, check .

`toBeEmptyDOMElement`

This allows you to assert whether an element has no visible content for the user. It ignores comments but will fail if the element contains white-space.

Examples

`toBeInTheDocument`

This allows you to assert whether an element is present in the document or not.

Examples

Note: This matcher does not find detached elements. The element must be added to the document to be found by toBeInTheDocument. If you desire to search in a detached element please use: toContainElement

`toBeInvalid`

This allows you to check if an element, is currently invalid.

An element is invalid if it has an with no value or a value of "true", or if the result of is false.

Examples

`toBeRequired`

This allows you to check if a form element is currently required.

An element is required if it is having a required or aria-required="true" attribute.

Examples

`toBeValid`

This allows you to check if the value of an element, is currently valid.

An element is valid if it has no s or an attribute value of "false". The result of must also be true if it's a form element.

Examples

`toBeVisible`

This allows you to check if an element is currently visible to the user.

An element is visible if all the following conditions are met:

it is present in the document
it does not have its css property display set to none
it does not have its css property visibility

Examples

`toContainElement`

This allows you to assert whether an element contains another element as a descendant or not.

Examples

`toContainHTML`

Assert whether a string representing a HTML element is contained in another element. The string should contain valid html, and not any incomplete html.

Examples

Chances are you probably do not need to use this matcher. We encourage testing from the perspective of how the user perceives the app in a browser. That's why testing against a specific DOM structure is not advised.
It could be useful in situations where the code being tested renders html that was obtained from an external source, and you want to validate that that html code was used as intended.
It should not be used to check DOM structure that you control. Please use toContainElement instead.

`toHaveAccessibleDescription`

This allows you to assert that an element has the expected .

You can pass the exact string of the expected accessible description, or you can make a partial match passing a regular expression, or by using /.

Examples

`toHaveAccessibleName`

This allows you to assert that an element has the expected . It is useful, for instance, to assert that form elements and buttons are properly labelled.

You can pass the exact string of the expected accessible name, or you can make a partial match passing a regular expression, or by using /.

Examples

`toHaveAttribute`

This allows you to check whether the given element has an attribute or not. You can also optionally check that the attribute has a specific expected value or partial match using /

Examples

`toHaveClass`

This allows you to check whether the given element has certain classes within its class attribute.

You must provide at least one class, unless you are asserting that an element does not have any classes.

Examples

`toHaveFocus`

This allows you to assert whether an element has focus or not.

Examples

`toHaveFormValues`

This allows you to check if a form or fieldset contains form controls for each given name, and having the specified value.

It is important to stress that this matcher can only be invoked on a or a element.
This allows it to take advantage of the property in form and fieldset to reliably fetch all form controls within them.
This also avoids the possibility that users provide a container that contains more than one form, thereby intermixing form controls that are not related, and could even conflict with one another.

This matcher abstracts away the particularities with which a form control value is obtained depending on the type of form control. For instance, <input> elements have a value attribute, but <select> elements do not. Here's a list of all cases covered:

<input type="number"> elements return the value as a number, instead of a string.
<input type="checkbox"> elements:

The above rules make it easy, for instance, to switch from using a single select control to using a group of radio buttons. Or to switch from a multi select control, to using a group of checkboxes. The resulting set of form values used by this matcher to compare against would be the same.

Examples

`toHaveStyle`

This allows you to check if a certain element has some specific css properties with specific values applied. It matches only if the element has all the expected properties applied, not just some of them.

Examples

This also works with rules that are applied to the element via a class name for which some rules are defined in a stylesheet currently active in the document. The usual rules of css precedence apply.

`toHaveTextContent`

This allows you to check whether the given node has a text content or not. This supports elements, but also text nodes and fragments.

When a string argument is passed through, it will perform a partial case-sensitive match to the node content.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

If you want to match the whole content, you can use a RegExp to do it.

Examples

`toHaveValue`

This allows you to check whether the given form element has the specified value. It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.

For all other form elements, the value is matched using the same algorithm as in toHaveFormValues does.

Examples

Using DOM Testing Library

`toHaveDisplayValue`

This allows you to check whether the given form element has the specified displayed value (the one the end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues.

Examples

Using DOM Testing Library

`toBeChecked`

This allows you to check whether the given element is checked. It accepts an input of type checkbox or radio and elements with a role of checkbox, radio or switch with a valid aria-checked attribute of "true" or "false".

Examples

`toBePartiallyChecked`

This allows you to check whether the given element is partially checked. It accepts an input of type checkbox and elements with a role of checkbox with a aria-checked="mixed", or input of type checkbox with indeterminate set to true

Examples

`toHaveErrorMessage`

This allows you to check whether the given element has an or not.

Use the aria-errormessage attribute to reference another element that contains custom error message text. Multiple ids is NOT allowed. Authors MUST use aria-invalid in conjunction with aria-errormessage. Learn more from .

Whitespace is normalized.

When a string argument is passed through, it will perform a whole case-sensitive match to the error message text.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

To perform a partial match, you can pass a RegExp or use expect.stringContaining("partial string").

Examples

Deprecated matchers

`toBeEmpty`

Note: This matcher is being deprecated due to a name clash with jest-extended. See more info in #216. In the future, please use only toBeEmptyDOMElement

This allows you to assert whether an element has content or not.

Examples

`toBeInTheDOM`

This custom matcher is deprecated. Prefer toBeInTheDocument instead.

This allows you to check whether a value is a DOM element, or not.

Contrary to what its name implies, this matcher only checks that you passed to it a valid DOM element. It does not have a clear definition of what "the DOM" is. Therefore, it does not check whether that element is contained anywhere.

This is the main reason why this matcher is deprecated, and will be removed in the next major release. You can follow the discussion around this decision in more detail .

As an alternative, you can use toBeInTheDocument or toContainElement. Or if you just want to check if a value is indeed an HTMLElement you can always use some of :

Note: The differences between toBeInTheDOM and toBeInTheDocument are significant. Replacing all uses of toBeInTheDOM with toBeInTheDocument will likely cause unintended consequences in your tests. Please make sure when replacing toBeInTheDOM to read through the documentation of the proposed alternatives to see which use case works better for your needs.

`toHaveDescription`

This custom matcher is deprecated. Prefer toHaveAccessibleDescription instead, which is more comprehensive in implementing the official spec.

This allows you to check whether the given element has a description or not.

An element gets its description via the . Set this to the id of one or more other elements. These elements may be nested inside, be outside, or a sibling of the passed in element.

Whitespace is normalized. Using multiple ids will .

When a string argument is passed through, it will perform a whole case-sensitive match to the description text.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

To perform a partial match, you can pass a RegExp or use expect.stringContaining("partial string").

Examples

Inspiration

This whole library was extracted out of Kent C. Dodds' [DOM Testing Library][dom-testing-library], which was in turn extracted out of [React Testing Library][react-testing-library].

The intention is to make this available to be used independently of these other libraries, and also to make it more clear that these other libraries are independent from jest, and can be used with other tests runners as well.

Guiding Principles

[The more your tests resemble the way your software is used, the more confidence they can give you.][guiding-principle]

This library follows the same guiding principles as its mother library [DOM Testing Library][dom-testing-library]. Go [check them out][guiding-principle] for more details.

Additionally, with respect to custom DOM matchers, this library aims to maintain a minimal but useful set of them, while avoiding bloating itself with merely convenient ones that can be easily achieved with other APIs. In general, the overall criteria for what is considered a useful custom matcher to add to this library, is that doing the equivalent assertion on our own makes the test code more verbose, less clear in its intent, and/or harder to read.

hidden

collapse

if there's a single one with the given name attribute, it is treated as a boolean, returning true if the checkbox is checked, false if unchecked.

expect(
  getByTestId(document.documentElement, "html-element")
).toBeInTheDocument();
expect(
  getByTestId(document.documentElement, "svg-element")
).toBeInTheDocument();
expect(
  queryByTestId(document.documentElement, "does-not-exist")
).not.toBeInTheDocument();

<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />

<form data-testid="valid-form">
  <input />
</form>

<form data-testid="invalid-form">
  <input required />
</form>

expect(getByTestId("no-aria-invalid")).not.toBeInvalid();
expect(getByTestId("aria-invalid")).toBeInvalid();
expect(getByTestId("aria-invalid-value")).toBeInvalid();
expect(getByTestId("aria-invalid-false")).not.toBeInvalid();

expect(getByTestId("valid-form")).not.toBeInvalid();
expect(getByTestId("invalid-form")).toBeInvalid();

<input data-testid="required-input" required />
<input data-testid="aria-required-input" aria-required="true" />
<input data-testid="conflicted-input" required aria-required="false" />
<input data-testid="aria-not-required-input" aria-required="false" />
<input data-testid="optional-input" />
<input data-testid="unsupported-type" type="image" required />
<select data-testid="select" required></select>
<textarea data-testid="textarea" required></textarea>
<div data-testid="supported-role" role="tree" required></div>
<div data-testid="supported-role-aria" role="tree" aria-required="true"></div>

expect(getByTestId("required-input")).toBeRequired();
expect(getByTestId("aria-required-input")).toBeRequired();
expect(getByTestId("conflicted-input")).toBeRequired();
expect(getByTestId("aria-not-required-input")).not.toBeRequired();
expect(getByTestId("optional-input")).not.toBeRequired();
expect(getByTestId("unsupported-type")).not.toBeRequired();
expect(getByTestId("select")).toBeRequired();
expect(getByTestId("textarea")).toBeRequired();
expect(getByTestId("supported-role")).not.toBeRequired();
expect(getByTestId("supported-role-aria")).toBeRequired();

<input data-testid="no-aria-invalid" />
<input data-testid="aria-invalid" aria-invalid />
<input data-testid="aria-invalid-value" aria-invalid="true" />
<input data-testid="aria-invalid-false" aria-invalid="false" />

<form data-testid="valid-form">
  <input />
</form>

<form data-testid="invalid-form">
  <input required />
</form>

expect(getByTestId("no-aria-invalid")).toBeValid();
expect(getByTestId("aria-invalid")).not.toBeValid();
expect(getByTestId("aria-invalid-value")).not.toBeValid();
expect(getByTestId("aria-invalid-false")).toBeValid();

expect(getByTestId("valid-form")).toBeValid();
expect(getByTestId("invalid-form")).not.toBeValid();

<div data-testid="zero-opacity" style="opacity: 0">Zero Opacity Example</div>
<div data-testid="visibility-hidden" style="visibility: hidden">
  Visibility Hidden Example
</div>
<div data-testid="display-none" style="display: none">Display None Example</div>
<div style="opacity: 0">
  <span data-testid="hidden-parent">Hidden Parent Example</span>
</div>
<div data-testid="visible">Visible Example</div>
<div data-testid="hidden-attribute" hidden>Hidden Attribute Example</div>

expect(getByText("Zero Opacity Example")).not.toBeVisible();
expect(getByText("Visibility Hidden Example")).not.toBeVisible();
expect(getByText("Display None Example")).not.toBeVisible();
expect(getByText("Hidden Parent Example")).not.toBeVisible();
expect(getByText("Visible Example")).toBeVisible();
expect(getByText("Hidden Attribute Example")).not.toBeVisible();

const ancestor = getByTestId("ancestor");
const descendant = getByTestId("descendant");
const nonExistantElement = getByTestId("does-not-exist");

expect(ancestor).toContainElement(descendant);
expect(descendant).not.toContainElement(ancestor);
expect(ancestor).not.toContainElement(nonExistantElement);

// These are valid uses
expect(getByTestId("parent")).toContainHTML(
  '<span data-testid="child"></span>'
);
expect(getByTestId("parent")).toContainHTML('<span data-testid="child" />');
expect(getByTestId("parent")).not.toContainHTML("<br />");

// These won't work
expect(getByTestId("parent")).toContainHTML('data-testid="child"');
expect(getByTestId("parent")).toContainHTML("data-testid");
expect(getByTestId("parent")).toContainHTML("</span>");

<a
  data-testid="link"
  href="/"
  aria-label="Home page"
  title="A link to start over"
  >Start</a
>
<a data-testid="extra-link" href="/about" aria-label="About page">About</a>
<img src="avatar.jpg" data-testid="avatar" alt="User profile pic" />
<img
  src="logo.jpg"
  data-testid="logo"
  alt="Company logo"
  aria-describedby="t1"
/>
<span id="t1" role="presentation">The logo of Our Company</span>

expect(getByTestId("link")).toHaveAccessibleDescription();
expect(getByTestId("link")).toHaveAccessibleDescription("A link to start over");
expect(getByTestId("link")).not.toHaveAccessibleDescription("Home page");
expect(getByTestId("extra-link")).not.toHaveAccessibleDescription();
expect(getByTestId("avatar")).not.toHaveAccessibleDescription();
expect(getByTestId("logo")).not.toHaveAccessibleDescription("Company logo");
expect(getByTestId("logo")).toHaveAccessibleDescription(
  "The logo of Our Company"
);

<img data-testid="img-alt" src="" alt="Test alt" />
<img data-testid="img-empty-alt" src="" alt="" />
<svg data-testid="svg-title"><title>Test title</title></svg>
<button data-testid="button-img-alt"><img src="" alt="Test" /></button>
<p><img data-testid="img-paragraph" src="" alt="" /> Test content</p>
<button data-testid="svg-button"><svg><title>Test</title></svg></p>
<div><svg data-testid="svg-without-title"></svg></div>
<input data-testid="input-title" title="test" />

expect(getByTestId("img-alt")).toHaveAccessibleName("Test alt");
expect(getByTestId("img-empty-alt")).not.toHaveAccessibleName();
expect(getByTestId("svg-title")).toHaveAccessibleName("Test title");
expect(getByTestId("button-img-alt")).toHaveAccessibleName();
expect(getByTestId("img-paragraph")).not.toHaveAccessibleName();
expect(getByTestId("svg-button")).toHaveAccessibleName();
expect(getByTestId("svg-without-title")).not.toHaveAccessibleName();
expect(getByTestId("input-title")).toHaveAccessibleName();

const button = getByTestId("ok-button");

expect(button).toHaveAttribute("disabled");
expect(button).toHaveAttribute("type", "submit");
expect(button).not.toHaveAttribute("type", "button");

expect(button).toHaveAttribute("type", expect.stringContaining("sub"));
expect(button).toHaveAttribute("type", expect.not.stringContaining("but"));

const deleteButton = getByTestId("delete-button");
const noClasses = getByTestId("no-classes");

expect(deleteButton).toHaveClass("extra");
expect(deleteButton).toHaveClass("btn-danger btn");
expect(deleteButton).toHaveClass("btn-danger", "btn");
expect(deleteButton).not.toHaveClass("btn-link");

expect(deleteButton).toHaveClass("btn-danger extra btn", { exact: true }); // to check if the element has EXACTLY a set of classes
expect(deleteButton).not.toHaveClass("btn-danger extra", { exact: true }); // if it has more than expected it is going to fail

expect(noClasses).not.toHaveClass();

<form data-testid="login-form">
  <input type="text" name="username" value="jane.doe" />
  <input type="password" name="password" value="12345678" />
  <input type="checkbox" name="rememberMe" checked />
  <button type="submit">Sign in</button>
</form>

const button = getByTestId("delete-button");

expect(button).toHaveStyle("display: none");
expect(button).toHaveStyle({ display: "none" });
expect(button).toHaveStyle(`
  background-color: red;
  display: none;
`);
expect(button).toHaveStyle({
  backgroundColor: "red",
  display: "none",
});
expect(button).not.toHaveStyle(`
  background-color: blue;
  display: none;
`);
expect(button).not.toHaveStyle({
  backgroundColor: "blue",
  display: "none",
});

const element = getByTestId("text-content");

expect(element).toHaveTextContent("Content");
expect(element).toHaveTextContent(/^Text Content$/); // to match the whole content
expect(element).toHaveTextContent(/content$/i); // to use case-insensitive match
expect(element).not.toHaveTextContent("content");

<input type="text" value="text" data-testid="input-text" />
<input type="number" value="5" data-testid="input-number" />
<input type="text" data-testid="input-empty" />
<select multiple data-testid="select-number">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third" selected>Third Value</option>
</select>

const textInput = getByTestId("input-text");
const numberInput = getByTestId("input-number");
const emptyInput = getByTestId("input-empty");
const selectInput = getByTestId("select-number");

expect(textInput).toHaveValue("text");
expect(numberInput).toHaveValue(5);
expect(emptyInput).not.toHaveValue();
expect(selectInput).toHaveValue(["second", "third"]);

<label for="input-example">First name</label>
<input type="text" id="input-example" value="Luca" />

<label for="textarea-example">Description</label>
<textarea id="textarea-example">An example description here.</textarea>

<label for="single-select-example">Fruit</label>
<select id="single-select-example">
  <option value="">Select a fruit...</option>
  <option value="banana">Banana</option>
  <option value="ananas">Ananas</option>
  <option value="avocado">Avocado</option>
</select>

<label for="multiple-select-example">Fruits</label>
<select id="multiple-select-example" multiple>
  <option value="">Select a fruit...</option>
  <option value="banana" selected>Banana</option>
  <option value="ananas">Ananas</option>
  <option value="avocado" selected>Avocado</option>
</select>

const input = screen.getByLabelText("First name");
const textarea = screen.getByLabelText("Description");
const selectSingle = screen.getByLabelText("Fruit");
const selectMultiple = screen.getByLabelText("Fruits");

expect(input).toHaveDisplayValue("Luca");
expect(input).toHaveDisplayValue(/Luc/);
expect(textarea).toHaveDisplayValue("An example description here.");
expect(textarea).toHaveDisplayValue(/example/);
expect(selectSingle).toHaveDisplayValue("Select a fruit...");
expect(selectSingle).toHaveDisplayValue(/Select/);
expect(selectMultiple).toHaveDisplayValue([/Avocado/, "Banana"]);

<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
  role="checkbox"
  aria-checked="false"
  data-testid="aria-checkbox-unchecked"
/>

<input type="radio" checked value="foo" data-testid="input-radio-checked" />
<input type="radio" value="foo" data-testid="input-radio-unchecked" />
<div role="radio" aria-checked="true" data-testid="aria-radio-checked" />
<div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />
<div role="switch" aria-checked="true" data-testid="aria-switch-checked" />
<div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />

const inputCheckboxChecked = getByTestId("input-checkbox-checked");
const inputCheckboxUnchecked = getByTestId("input-checkbox-unchecked");
const ariaCheckboxChecked = getByTestId("aria-checkbox-checked");
const ariaCheckboxUnchecked = getByTestId("aria-checkbox-unchecked");
expect(inputCheckboxChecked).toBeChecked();
expect(inputCheckboxUnchecked).not.toBeChecked();
expect(ariaCheckboxChecked).toBeChecked();
expect(ariaCheckboxUnchecked).not.toBeChecked();

const inputRadioChecked = getByTestId("input-radio-checked");
const inputRadioUnchecked = getByTestId("input-radio-unchecked");
const ariaRadioChecked = getByTestId("aria-radio-checked");
const ariaRadioUnchecked = getByTestId("aria-radio-unchecked");
expect(inputRadioChecked).toBeChecked();
expect(inputRadioUnchecked).not.toBeChecked();
expect(ariaRadioChecked).toBeChecked();
expect(ariaRadioUnchecked).not.toBeChecked();

const ariaSwitchChecked = getByTestId("aria-switch-checked");
const ariaSwitchUnchecked = getByTestId("aria-switch-unchecked");
expect(ariaSwitchChecked).toBeChecked();
expect(ariaSwitchUnchecked).not.toBeChecked();

<input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />
<input type="checkbox" checked data-testid="input-checkbox-checked" />
<input type="checkbox" data-testid="input-checkbox-unchecked" />
<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />
<div
  role="checkbox"
  aria-checked="false"
  data-testid="aria-checkbox-unchecked"
/>
<input type="checkbox" data-testid="input-checkbox-indeterminate" />

const ariaCheckboxMixed = getByTestId("aria-checkbox-mixed");
const inputCheckboxChecked = getByTestId("input-checkbox-checked");
const inputCheckboxUnchecked = getByTestId("input-checkbox-unchecked");
const ariaCheckboxChecked = getByTestId("aria-checkbox-checked");
const ariaCheckboxUnchecked = getByTestId("aria-checkbox-unchecked");
const inputCheckboxIndeterminate = getByTestId("input-checkbox-indeterminate");

expect(ariaCheckboxMixed).toBePartiallyChecked();
expect(inputCheckboxChecked).not.toBePartiallyChecked();
expect(inputCheckboxUnchecked).not.toBePartiallyChecked();
expect(ariaCheckboxChecked).not.toBePartiallyChecked();
expect(ariaCheckboxUnchecked).not.toBePartiallyChecked();

inputCheckboxIndeterminate.indeterminate = true;
expect(inputCheckboxIndeterminate).toBePartiallyChecked();

<label for="startTime"> Please enter a start time for the meeting: </label>
<input
  id="startTime"
  type="text"
  aria-errormessage="msgID"
  aria-invalid="true"
  value="11:30 PM"
/>
<span id="msgID" aria-live="assertive" style="visibility:visible">
  Invalid time: the time must be between 9:00 AM and 5:00 PM
</span>

const timeInput = getByLabel("startTime");

expect(timeInput).toHaveErrorMessage(
  "Invalid time: the time must be between 9:00 AM and 5:00 PM"
);
expect(timeInput).toHaveErrorMessage(/invalid time/i); // to partially match
expect(timeInput).toHaveErrorMessage(expect.stringContaining("Invalid time")); // to partially match
expect(timeInput).not.toHaveErrorMessage("Pikachu!");

const closeButton = getByRole("button", { name: "Close" });

expect(closeButton).toHaveDescription("Closing will discard any changes");
expect(closeButton).toHaveDescription(/will discard/); // to partially match
expect(closeButton).toHaveDescription(expect.stringContaining("will discard")); // to partially match
expect(closeButton).toHaveDescription(/^closing/i); // to use case-insensitive match
expect(closeButton).not.toHaveDescription("Other description");

const deleteButton = getByRole("button", { name: "Delete" });
expect(deleteButton).not.toHaveDescription();
expect(deleteButton).toHaveDescription(""); // Missing or empty description always becomes a blank string

Testing Input

hashtag🎹 Testing Input

hashtag🎹 Testing Input

Example

hashtagFull Example

hashtagStep-By-Step

hashtagImports

hashtagMock

hashtagArrange

hashtagAct

hashtagAssert

hashtagSystem Under Test

Cheatsheet

hashtagQueries

hashtagAsync

hashtagEvents

hashtagOther

hashtagText Match Options

Example

hashtagFull Example

hashtagStep-By-Step

hashtagImports

hashtagMock

hashtagArrange

hashtagAct

hashtagAssert

hashtagSystem Under Test

Cheatsheet

hashtagQueries

hashtagAsync

hashtagEvents

hashtagOther

hashtagText Match Options

Testing Input

hashtag🎹 Testing Input

hashtag🎹 Testing Input

hashtag🗺 Site Navigation

hashtag📖 Storybook

hashtagStories

hashtagArgs

hashtagControls

hashtagA11y and Other Addons

hashtagAnatomy of a Story

hashtagstorybookCustomArgs

hashtagcreateStoryOptions

hashtagResources

hashtagGeneral Info

hashtagSitecore

ByLabelText

hashtagAPI

hashtagOptions

hashtagname

hashtagselector

ByTitle

hashtagAPI

Common Mistakes With RTL

hashtagOptions

ByPlaceholderText

hashtagAPI

hashtagOptions

Migrate from Enzyme

hashtagWhat is React Testing Library?

hashtagWhy should I use React Testing Library?

hashtagHow to migrate from Enzyme to React Testing Library?

hashtagInstall React Testing Library

hashtagImport React Testing Library to your test

hashtagBasic Enzyme to React Testing Library migration examples

hashtagTest 1: Render the component, and check if the h1 value is correct

hashtagTest 2: Input texts must have correct value

hashtagUsing act() and wrapper.update()

hashtagSimulate user events

hashtagTriggering class methods in tests (wrapper.instance())

hashtagHow to shallow render a component?

ByRole

hashtagAPI

Setup

hashtagGlobal Config

Testing

hashtagOptions

hashtaghidden

🎹 Testing Input

🎹 Testing Input

Full Example

Step-By-Step

Imports

Mock

Arrange

Act

Assert

System Under Test

Queries

Async

Events

Other

Text Match Options

Full Example

Step-By-Step

Imports

Mock

Arrange

Act

Assert

System Under Test

Queries

Async

Events

Other

Text Match Options

🎹 Testing Input

🎹 Testing Input

🗺 Site Navigation

📖 Storybook

Stories

Args

Controls

A11y and Other Addons

Anatomy of a Story

storybookCustomArgs

createStoryOptions

Resources

General Info

Sitecore

API

Options

`name`

`selector`

API

Options

API

Options

What is React Testing Library?

Why should I use React Testing Library?

How to migrate from Enzyme to React Testing Library?

Install React Testing Library

Import React Testing Library to your test

Basic Enzyme to React Testing Library migration examples

Test 1: Render the component, and check if the `h1` value is correct

Test 2: Input texts must have correct value

Using act() and wrapper.update()

Simulate user events

Triggering class methods in tests (`wrapper.instance()`)

How to `shallow` render a component?

API

Global Config

Options

`hidden`

`selected`

`checked`

`current`

`pressed`

`expanded`

`queryFallbacks`

`level`

`description`

Custom Render

Add custom queries

Configuring Jest with Test Utils

Jest 28

Jest 27

Jest 24 (or lower) and defaults