Questions about testing React components with the react-testing-library utility.
Questions tagged [react-testing-library]
1608 questions
17
votes
1 answer
How to test useEffect with async function and setState inside
I have set up a github project to understand how to better test react (v 16.8.0) useEffect hook.
I make an api call to fetch data inside useEffect and I set the received data as state component element.
My component receives the query as a prop and…
delca85
- 876
- 2
- 8
- 15
16
votes
2 answers
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?
Evanss
- 17,152
- 66
- 217
- 397
16
votes
2 answers
SyntaxError: Missing initializer in const declaration
I am writing a simple test using react-native-testing-library (my first steps with that library) in my react native expo app. But I am getting a confused error coming from somewhere inside react-native code base itself. Either there is something…
TheSoul
- 2,726
- 7
- 30
- 58
16
votes
3 answers
How to test styled Material-UI components wrapped in withStyles using react-testing-library?
I am trying to create a test with a styled Material-UI component using react-testing-library in typescript. I'm finding it difficult to access the internal functions of the component to mock and assert.
Form.tsx
export const styles = ({ palette,…
Mayur Dhurpate
- 786
- 9
- 28
15
votes
2 answers
How can I enable react-i18n translation file to be used in the unit tests done with react-testing-library and jest?
I am making unit tests with jest and react-testing-library for my frontend application which is done with React. My unit tests worked nicely before I added the internationalization with react-i18next -library. Now when I run the tests, it seems that…
Sonja Laurila
- 347
- 3
- 11
15
votes
5 answers
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 change, and then tried the rerender function, but I…
jktravis
- 850
- 4
- 14
- 29
14
votes
1 answer
Parent node in react-testing-library
The component that I have testing renders something this:
Textspan text
As it turns out for testing the only reliable text that I have is the 'span text' but I want to get the 'Text' part of the . Using Jest and…
Kevin Burton
- 1,104
- 2
- 12
- 25
14
votes
1 answer
How to test a component composed of other components with react-testing-library?
I am completely new to react-testing-library. I just started reading all the various "Getting Started" documentation and blog posts I could find after I had no success testing a component with Enzyme. Most of the examples I could find are pretty…
peterlawless
- 289
- 3
- 11
14
votes
3 answers
React Testing Library cleanup not working in Jest's describe bocks
I have some work in progress tests, this is working as expected:
describe('Parent', () => {
afterEach(() => {
cleanup();
jest.resetModules();
});
describe('Test 1', () => {
const wrapper = render(
…
Evanss
- 17,152
- 66
- 217
- 397
13
votes
2 answers
How to fix `TypeError: document.createRange is not a function` error while testing material ui popper with react-testing-library?
I have a material-ui TextField which on focus opens a Popper. I am trying to test this behavior using react-testing-library.
Component:
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from…
sruthi
- 1,809
- 2
- 18
- 42
13
votes
4 answers
Jest + react-testing-library: Warning update was not wrapped in act()
I am testing my component wit react-testing-library and test works well. I just can't get rid of this warning, fireEvent should by wrapped in act out-of-the-box, but I tried to wrap it again and it did'nt help.
Here is my test case.
it.only("should…
iamwtk
- 672
- 2
- 10
- 22
12
votes
3 answers
how to get code coverage in react with react testing library
I have written unit tests using react testing library(@testing-library/react & @testing-library/dom) and jest-dom(@testing-library/jest-dom). I am able to run my tests successfully.
I am not using jest/jest-cli complete pacakge. I am using react…
Mahesh
- 545
- 7
- 22
12
votes
1 answer
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('https://example.com', { onMount: true });
return (
<>
…
dagda1
- 21,477
- 48
- 188
- 367
12
votes
1 answer
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 attached the respectives test & component files.
Also,…
intercoder
- 1,433
- 4
- 17
- 29
12
votes
2 answers
React testing library: Test attribute / prop
I'm writing a React app using TypeScript. I use material-ui for my components and react-testing-library for my unit tests.
I'm writing a wrapper for material-ui's Grid component so that I always have an item.
import Grid from…
J. Hesters
- 8,261
- 15
- 78
- 164