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
1
vote
1 answer

skip import React from 'react' from test file using jest?

I'm using testing-library with react I have this in my test file import React from 'react' // best if I can skip this in every test file import { render, screen } from '@testing-library/react' but I got this error `@testing-library/react` import…
Tina Glenn
  • 85
  • 6
1
vote
1 answer

How to test if the button closes the popup succesfully?

I have a simple pop-up that I want to test if the clicked button closes the popup using testing-library/react. The way shown in docs doesn't work for me for some reason. I'm able to console log the button, so the query works but fireEvent doesn't…
FitAdam
  • 49
  • 6
1
vote
0 answers

Jest Failed after upgrading : _jestWatcher(...).TestWatcher is not a constructor

I have been working on upgrading a NextJS projet from version 9 to 12 : During the updates, i had to update React from 16 to 17 and Jest from 23 to 28. My final package.Json looks like : "next": "^12.2.3", "react": "^17.0.2", "react-dom":…
Tawfik Tn
  • 11
  • 1
1
vote
1 answer

React component test function call in useEffect

I have this component: export const CityForm: FC = () => { const { state: widgetState } = useContext(WidgetContext); const { dispatch: geocodingDispatch } = useContext(GeocodingContext); const [city, setCity] = useState(''); …
Jan Jankowski
  • 145
  • 9
1
vote
1 answer

mocking a function thats already imported in the source

here is the basic setup component.js import {functionIWantToMock, val} from "somewhere/on/my/hdd" export function Component() { return (<>
{val}
{functionIWantToMock()}
) } component.test.js import…
glend
  • 1,592
  • 1
  • 17
  • 36
1
vote
0 answers

"Jest failed to parse a file" in React Testing Library

The official introduction React Testing Library | Testing Library links to a tutorial page React Testing Library Tutorial. In the tutorial it says "After running your test on the command line, you should see the HTML output of your App component".…
丶 Limeー来夢 丶
  • 648
  • 1
  • 7
  • 20
1
vote
2 answers

MonacoEditor not working with Jest and React Testing Library

I am writing test cases for a component and currently using MonacoEditor in my component. During running test cases I was getting below error: Cannot find module 'monaco-editor' from 'node_modules/@uiw/react-monacoeditor/lib/index.js' To Fix this…
Singh
  • 11
  • 5
1
vote
0 answers

TypeError: Cannot read properties of undefined (reading 'match') jest

I'm rendering the below react component, Below is the code. I have defined both params and uselocation but I keep getting this error TypeError: Cannot read properties of undefined (reading 'match'). Does anyone know what's wrong in…
shanky
  • 751
  • 1
  • 16
  • 46
1
vote
2 answers

How to handle sub-components that make requests when using React Testing Library?

I have a parent component with a button that when clicked launches a modal window child component. A request is made from the child component when it first renders, and then response data is saved to local state, e.g. useEffect(() => { const…
J_P
  • 599
  • 1
  • 9
  • 20
1
vote
0 answers

Testing a nested custom hook with react-testing-library

I'm trying to test a hook in isolation with @testing-library/render-hooks in a React Native project. The hook I have looks something like this: const useStatus = () => { const [ status, setStatus ] = useState(null) const { data: data1 } =…
Edan Parker
  • 43
  • 5
1
vote
1 answer

renderHook causes `TooManyRerenders` error when changing state

I want to test a hook that uses states in its implementation, but each time I run my tests I get this error: Error: Uncaught [Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.] The hook is complex and I…
KawaLo
  • 1,783
  • 3
  • 16
  • 34
1
vote
1 answer

how to test ant design modal window when interacting using keyboard

i have a following component const ModalComponent = () => { const [visible, setVisible] = useState(false); return ( <>
howard wolowitz
  • 477
  • 5
  • 21
1
vote
1 answer

Testing when react-hot-toast appears with jest

I am trying to write a test for when a react-hot-toast appears. Currently in my app, when you click a button, a react hot toast appears. It is visible on screen and within the inspect window, and after a few seconds it will disappear from view and…
Brian
  • 149
  • 1
  • 12
1
vote
1 answer

How to include external library in testing library/storybook

I'm using Storybook to create stories. I want to create tests of the stories using @storybook/testing-react. However, I'm also using materialize-react which requires that materialize.min.js is loaded. I am loading this in…
Matt
  • 4,261
  • 4
  • 39
  • 60
1
vote
0 answers

Vitest is catching an error when I use waitForElementToBeRemoved on a test of a page

I'm making tests on an application that has several pages. One of the pages redirects to another through a button like the following
{loading ? : (
Kelder Passos
  • 11
  • 1
  • 3
1 2 3
…
99 100