Stack Overflow
Stack Overflow

Questions tagged [react-testing-library]

Questions about testing React components with the react-testing-library utility.

React Testing Library is a lightweight library for testing components. This library is built on top of Testing Library, which can be used for a number of other frontend libraries/frameworks, such as , , and more.

Guiding Principle

The more your tests resemble the way your software is used, the more confidence they can give you.

The library tests on DOM Nodes, primarily using JSDOM/Jest rather than instances of React components

3635 questions
371
votes
13 answers

How do you test for the non-existence of an element using jest and react-testing-library?

I have a component library that I'm writing unit tests for using Jest and react-testing-library. Based on certain props or events I want to verify that certain elements aren't being rendered. getByText, getByTestId, etc throw and error in…
SomethingOn
  • 9,813
  • 17
  • 68
  • 107
182
votes
16 answers

react-testing-library why is toBeInTheDocument() not a function

Here is my code for a tooltip that toggles the CSS property display: block on MouseOver and on Mouse Out display: none. it('should show and hide the message using onMouseOver and onMouseOut events respectively', () => { const { queryByTestId,…
dorriz
  • 1,927
  • 3
  • 12
  • 19
170
votes
8 answers

How to test a className with the Jest and React testing library

I am totally new to JavaScript testing and am working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and React Testing Library. Below I have a test that will render a button…
Giesburts
  • 6,879
  • 15
  • 48
  • 85
158
votes
12 answers

react-testing-library: some portion of debug's output is not visible

I am using react jest with react testing library to test my component. I am facing a weird issue. I am using debug, returned by render from testing-library. test('component should work', async () => { const { findByText, debug } =…
Amit Chauhan
  • 6,151
  • 2
  • 24
  • 37
132
votes
5 answers

How to solve the "update was not wrapped in act()" warning in testing-library-react?

I'm working with a simple component that does a side effect. My test passes, but I'm getting the warning Warning: An update to Hello inside a test was not wrapped in act(...).. I'm also don't know if waitForElement is the best way to write this…
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55
125
votes
10 answers

How to test anchor's href with react-testing-library

I am trying to test my anchor tag. Once I click it, I want to see if the window.location.href is what I expect. I've tried to render the anchor, click it, and then test window.location.href: test('should navigate to ... when link is clicked', () =>…
jaypee
  • 1,757
  • 3
  • 9
  • 12
120
votes
9 answers

Check that button is disabled in react-testing-library

I have a React component that generates a button whose content contains a element like this one: function Click(props) { return ( ); } I…
Nikita Sivukhin
  • 2,370
  • 3
  • 16
  • 33
109
votes
7 answers

Find element by id in react-testing-library

I'm using react-testing-libarary to test my react application. For some reason, I need to be able to find the element by id and not data-testid. There is no way to achieve this in the documentation. Is there a way to achieve this? I have the…
aks
  • 8,796
  • 11
  • 50
  • 78
97
votes
4 answers

How to mock react custom hook returned value?

Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); const ref = useCallback(node => { if (node !== null) { …
Homa
  • 3,417
  • 2
  • 19
  • 24
96
votes
10 answers

How to query by text string which contains html tags using React Testing Library?

Current Working Solution Using this html:

Name: Bob (special guest)

I can use the React Testing Library getByTestId method to find the…
Beau Smith
  • 33,433
  • 13
  • 94
  • 101
96
votes
4 answers

Get by HTML element with React Testing Library?

I'm using the getByTestId function in React Testing Library: const button = wrapper.getByTestId("button"); expect(heading.textContent).toBe("something"); Is it possible / advisable to search for HTML elements instead? So something like this: const…
Evanss
  • 23,390
  • 94
  • 282
  • 505
92
votes
4 answers

Difference between enzyme, ReactTestUtils and react-testing-library

What is the difference between enzyme, ReactTestUtils and react-testing-library for react testing? The ReactTestUtils documentation says: ReactTestUtils makes it easy to test React components in the testing framework of your choice. The enzyme…
Black
  • 9,541
  • 3
  • 54
  • 54
82
votes
3 answers

Jest mock react context

I need some help understanding how one can test an application using React Context. Here's my sample setup. context.js import React from 'react' export const AppContext = React.createContext() App.js import React from 'react' import MyComponent…
artooras
  • 6,315
  • 9
  • 45
  • 78
81
votes
7 answers

Best way to test input value in dom-testing-library or react-testing-library

What is the best way to test the value of an element in dom-testing-library/react-testing-library? The approach I've taken is to fetch the raw input element itself via the closest() method, which then gives me direct access to the value…
ecbrodie
  • 11,246
  • 21
  • 71
  • 120
77
votes
14 answers

React testing library on change for Material UI Select component

I am trying to test the onChange event of a Select component using react-testing-library. I grab the element using getByTestId which works great, then set the value of the element and then call fireEvent.change(select); but the onChange is never…
Rob Sanders
  • 5,197
  • 3
  • 31
  • 58
1
2 3
…
99 100