Questions tagged [react-testing-library]
Questions about testing React components with the react-testing-library utility.
react-testing-library
3,778
questions
438
votes
14
answers
372k
views
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.
...
- 10.6k
226
votes
17
answers
251k
views
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 ...
- 2,377
195
votes
12
answers
183k
views
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 () =>...
- 6,629
186
votes
10
answers
429k
views
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. ...
- 7,387
153
votes
6
answers
226k
views
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 ...
- 6,204
148
votes
10
answers
194k
views
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('...
- 2,027
130
votes
10
answers
204k
views
Check that button is disabled in react-testing-library
I have a React component that generates a button whose content contains a <span> element like this one:
function Click(props) {
return (
<button disable={props.disable}>
...
- 2,546
126
votes
4
answers
183k
views
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 => {
...
- 4,107
124
votes
8
answers
233k
views
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.
...
- 9,351
114
votes
8
answers
152k
views
How to query by text string which contains html tags using React Testing Library?
Current Working Solution
Using this html:
<p data-testid="foo">Name: <strong>Bob</strong> <em>(special guest)</em></p>
I can use the React Testing Library ...
- 34.3k
104
votes
4
answers
201k
views
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 / ...
- 23.7k
101
votes
10
answers
124k
views
When testing, code that causes React state updates should be wrapped into act
I have this test:
import {
render,
cleanup,
waitForElement
} from '@testing-library/react'
const TestApp = () => {
const { loading, data, error } = useFetch<Person>('https://example....
- 28.3k
98
votes
7
answers
309k
views
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 <input> element in dom-testing-library/react-testing-library?
The approach I've taken is to fetch the raw input element itself via the closest() ...
- 11.7k
97
votes
2
answers
65k
views
TypeError: scrollIntoView is not a function
I am new to react-testing-library / jest and attempting to write a test to see if the navigation of routes (using react-router-dom) is performed correctly. So far I have been following the README and ...
- 5,271
92
votes
4
answers
34k
views
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 ...
- 10.2k
92
votes
4
answers
107k
views
Consider using the "jsdom" test environment
I have this simple test:
import React from 'react'
import { render } from '@testing-library/react'
import Button from '.'
describe('Button', () => {
it('renders button without crashing', () =&...
- 227
90
votes
3
answers
154k
views
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()
...
- 6,685
89
votes
3
answers
173k
views
Checking text appears inside an element using react testing library
I'm writing some tests for a React app using Testing Library. I want to check that some text appears, but I need to check it appears in a particular place because I know it already appears somewhere ...
- 1,145
88
votes
2
answers
50k
views
Screen vs. render queries
There are two ways to use queries using React Testing Library.
You can either use the queries returned by the render method:
import React from 'react'
import { render } from '@testing-library/react'
....
- 7,545
85
votes
8
answers
186k
views
How to select an option from a select list with React Testing Library
I have a normal select list. I need to test handleChoice gets called when I choose an option. How can I do this with React Testing Library?
<select
onChange={handleChoice}
data-testid="...
- 23.7k
83
votes
15
answers
94k
views
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 ...
- 5,297
78
votes
9
answers
66k
views
How to mock ResizeObserver to work in unit tests using react testing library
If anyone can help, I have a custom hook that uses ResizeObserver to change the width of a component. My problem is that when I go to run my units test it breaks all my tests and looking at the ...
- 1,102
74
votes
14
answers
84k
views
how to test react-select with react-testing-library
App.js
import React, { Component } from "react";
import Select from "react-select";
const SELECT_OPTIONS = ["FOO", "BAR"].map(e => {
return { value: e, label: e };
});
class App extends ...
- 2,601
74
votes
4
answers
84k
views
React Testing Library: When to use userEvent.click and when to use fireEvent
I'm presently learning React-Testing-Library.
I'd like to test mouse interaction with an element. Presently it's a bit unclear to me the difference between userEvent.click(element) and fireEvent.click(...
- 1,914
71
votes
4
answers
134k
views
How do you check a checkbox in react-testing-library?
I cant seem to find much/any docs on this really simple thing I'm trying to achieve
I have a dropdown that is display: none. when I click a checkbox it becomes display: block
all I'm trying to assert ...
- 7,419
71
votes
7
answers
65k
views
react-testing-library - how to simulate file upload to a <input type="file" /> element?
I am using user-event to try to have more 'realistic' user interactions. However, after I click on the input, it will not fire the onChange function because by default it would only bring up the file ...
- 2,409
67
votes
6
answers
60k
views
React testing library: The given element does not have a value setter when fireEvent change on input form
I want to change the value of material UI TextField in react testing library.
I already set up the data-testid. Then using getByTestId i picked up the input element.
// the component
<TextField
...
- 1,515
67
votes
3
answers
54k
views
React Testing Library gives console error for ReactDOM.render in React 18
After updating to React 18 or creating a new React 18 app from create-react-app, when I run the yarn test command, it gives a console.error as a Warning for each of the render methods used in any of ...
- 1,077
66
votes
13
answers
56k
views
How to test material ui autocomplete with react testing library
I am using material-ui autocomplete component and am trying to test it using react-testing-library
Component:
/* eslint-disable no-use-before-define */
import TextField from '@material-ui/core/...
- 3,958
65
votes
5
answers
110k
views
React testing library: Test styles (specifically background image)
I'm building a React app with TypeScript. I do my component tests with react-testing-library.
I'm buildilng a parallax component for my landing page.
The component is passed the image via props and ...
- 14.2k
63
votes
5
answers
133k
views
How do I test that a child component is rendered?
In enzyme you can check for the existence of child component like this:
expect(wrapper.find(ChildComponent)).toHaveLength(1)
What is the equivalent to this test in react testing library? All the ...
- 1,757
60
votes
4
answers
39k
views
Testing Library React vs Jest
I have a really big application with react(lot of pages, modals, tables,etc) and I'm using redux-saga for managing the state. I have a lote of stores and almost in all the components I use the ...
- 1,568
56
votes
7
answers
78k
views
React testing library - check the existence of empty div
I'm testing a component where if ItemLength = 1, render returns null.
const { container, debug } = render(<MyComp ItemLength={1} />);
When I call debug() in my test, it shows a <div />. ...
- 6,157
55
votes
5
answers
82k
views
How to mock history.push with the new React Router Hooks using Jest
I am trying to mock history.push inside the new useHistory hook on react-router and using @testing-library/react. I just mocked the module like the first answer here: How to test components using new ...
- 1,028
54
votes
14
answers
81k
views
Jest Cannot read property 'createEvent' of null
I was trying to mock rejected value and got this error. It's weird that this construction works in the case of "success" addUser.mockImplementation(value => jest.fn().mockResolvedValue(...
- 689
54
votes
3
answers
73k
views
Parent node in react-testing-library
The component that I have testing renders something this:
<div>Text<span>span text</span></div>
As it turns out for testing the only reliable text that I have is the 'span ...
- 2,222
53
votes
5
answers
77k
views
Query a button with specific text
I have a (Jest) test to determine if a button exists:
it('renders a signup button', () => {
expect(sut.getByText('Sign up for free')).toBeDefined()
})
This test because there is both a button ...
- 3,841
53
votes
2
answers
200k
views
Unable to find an element with the text: "myText" error when using react-testing-library
I'm trying to use react-testing-library with React and Jest but one of my tests are failing and I think it has something to do with the regex on the className prop on the test file.
Below I have ...
- 2,341
50
votes
4
answers
48k
views
How to fix the "Warning: useLayoutEffect does nothing on the server"?
Heres the full error:
Warning: useLayoutEffect does nothing on the server, because its
effect cannot be encoded into the server renderer's output format.
This will lead to a mismatch between the ...
- 1,356
49
votes
3
answers
130k
views
React testing library how to use waitFor
I'm following a tutorial on React testing. The tutorial has a simple component like this, to show how to test asynchronous actions:
import React from 'react'
const TestAsync = () => {
const [...
- 1,111
48
votes
4
answers
90k
views
How to test if a component is rendered with the right props when using react-testing-library?
I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones:
const News = () => (
<div>
<h1>News</h1&...
- 4,875
46
votes
5
answers
114k
views
React Testing Library - Unable to find the element with data-testid
I am following the docs for react-testing-library to find if the element with data-testid attribute is rendered or not.
The react-testing-library is not able to find the element even though it exists....
- 3,036
46
votes
3
answers
16k
views
What is the difference between using `react-testing-library` and `cypress`?
So, react-testing-library is used for unit/integration testing, and cypress is used for e2e testing. However, both appear to do the same thing:
react-testing-library
Facilitates mocking
Tests as a ...
- 2,333
42
votes
6
answers
83k
views
Found multiple elements error in React Testing Library
Im having a problem with a query, I'm trying to get two radio inputs, I don't have any problem with one of them, but with the other one React Testing Library thrown an error: It Found multiple ...
- 2,859
40
votes
8
answers
85k
views
How do I trigger a change event on radio buttons in react-testing-library?
I'm in the process of moving over to react-testing-library, and have no idea how to trigger this event and get the results of the changes.
I've tried using the fireEvent function to trigger the ...
- 1,526
39
votes
6
answers
25k
views
The current testing environment is not configured to support act(...) - @testing-library/react
I'm trying to upgrade my project to React 18, everything works in dev and production mode in the browser. But after upgrading to the latest version of @testing-library/react some of my unit tests are ...
- 5,575
38
votes
4
answers
25k
views
Error: Not implemented: HTMLFormElement.prototype.submit
This is how my test case looks :
const renderCard = ({
onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
return render(
<Card title={title} onSubmit={onSubmit}>
<...
- 1,454
38
votes
4
answers
57k
views
Testing an error thrown by a React component using testing-library and jest
Following Kent C Dodds' provider pattern explained in this blog post, I have a context provider component along with a hook to use that context.
The hook guards against the use of it outside of the ...
- 787
37
votes
1
answer
85k
views
React Testing Library - using 'await wait()' after fireEvent
I'm trying to use Testing Library to check for DOM Elements after a fireEvent.click. I know I need to wait after the fireEvent, but am not sure why simply using await doesn't work? Below is the same ...
- 1,510
37
votes
8
answers
50k
views
Pressing enter to submit form in react-testing-library does not work
Description:
I am trying to test that a form submits when the user presses the "Enter" key. I have a passing test for when pressing the Submit button, but I also want to be sure the form submits with ...
- 2,027