Questions about testing React components with the react-testing-library utility.
Questions tagged [react-testing-library]
1608 questions
27
votes
3 answers
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 initial, non-hydrated UI and
the intended UI. To…
jkeary
- 826
- 8
- 14
26
votes
4 answers
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
otong
- 936
- 2
- 12
- 22
25
votes
2 answers
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 is when I click the checkbox, it shows the…
Red Baron
- 4,499
- 4
- 18
- 53
25
votes
2 answers
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 sets it via JSS as a background image:
J. Hesters
- 8,261
- 15
- 78
- 164
24
votes
2 answers
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 else.
The Testing Library documentation for…
Hives
- 381
- 1
- 2
- 7
24
votes
1 answer
How to fireEvent.scroll on a element inside container with react-testing-library?
I'm trying to simulate the scrolling in a element contained in a div, which is the one passed to render function.
I'm trying with something like this, but it seems that the div is not scrolling as my next expect is falling.
const content = (
…
Eylen
- 2,457
- 3
- 24
- 42
23
votes
1 answer
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 user would
Starts with the top-level component…
jack.benson
- 1,566
- 1
- 6
- 12
22
votes
2 answers
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 online examples I find just cover very simple tests…
riscos3
- 1,037
- 2
- 6
- 13
20
votes
6 answers
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/TextField';
import Autocomplete from…
sruthi
- 1,809
- 2
- 18
- 42
20
votes
5 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
- 4,398
- 3
- 26
- 52
19
votes
2 answers
react-testing-library - 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'
...
const { getByText } =…
Erazihel
- 6,368
- 3
- 24
- 49
19
votes
5 answers
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(
blankface
- 3,319
- 10
- 40
- 78
17
votes
1 answer
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
- 991
- 1
- 9
- 20
17
votes
1 answer
Testing api call inside useEffect using react-testing-library
I want to test api call and data returned which should be displayed inside my functional component. I created List component which performs api call. I would like the returned data to be displayed in the component and I use the useState hook for…
hetious
- 551
- 4
- 13
17
votes
2 answers
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 = () => (
News
...
Emi
- 2,666
- 1
- 21
- 29