Questions about testing React components with the react-testing-library utility.
Questions tagged [react-testing-library]
1608 questions
138
votes
7 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
- 7,004
- 17
- 60
- 99
70
votes
5 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
- 5,096
- 10
- 34
- 70
56
votes
2 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
- 5,253
- 3
- 34
- 43
47
votes
5 answers
Check that button is disabled in react-testing-library
I have a React component that generates a button, which content contains element like this one:
function Click(props) {
return (
);
}
I want…
Nikita Sivukhin
- 1,568
- 2
- 11
- 29
45
votes
6 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
- 919
- 1
- 8
- 16
41
votes
7 answers
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 Component {
state = {
selected:…
user2133814
- 1,869
- 1
- 20
- 28
40
votes
1 answer
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
- 17,152
- 66
- 217
- 397
38
votes
4 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
- 517
- 1
- 5
- 11
38
votes
6 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've the rendered…
aks
- 6,072
- 4
- 43
- 68
35
votes
2 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
- 4,425
- 4
- 34
- 59
35
votes
2 answers
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 this tutorial on how to use.
One of my…
Charklewis
- 1,971
- 2
- 15
- 40
34
votes
5 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 usng debug return by render from testing-library.
test('component should work', async () => {
const { findByText, debug } = render(
Amit Chauhan
- 3,990
- 1
- 15
- 30
32
votes
1 answer
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
- 3,855
- 6
- 29
- 47
31
votes
2 answers
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 react router hooks?
So I am…
Albert Alises
- 668
- 1
- 5
- 15
30
votes
6 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
- 29,103
- 12
- 82
- 88