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
2 answers

Jest - How to mock a ES6 default export and then Change the default implementation/return value

Background So I am trying to test a React functional component that calls a custom hook and depending on the return value of the hook, the component will render something differently. See below for an example: // App.js import…
0x5929
  • 400
  • 1
  • 4
  • 16
1
vote
0 answers

handle Submit and PreventDefault using react testing library

I am trying to write test case which has submit type and has prevent default inside submit button. It looks like event is not firing in test case. form.js click me function submit(e) { e.preventDefault(); } my test case it("Click with…
user3335796
  • 1,227
  • 1
  • 17
  • 24
1
vote
1 answer

hover testing not working on react component

Testing opacity while hover button is not working. Tried with both userEvent.hover(hoverButton) and fireEvent.mouseOver(hoverButton) unfortunately the result is same. At the same time the other properties are working, for example…
Mo.
  • 26,306
  • 36
  • 159
  • 225
1
vote
1 answer

Can't test timer in react using vitest (jest)

I have this simple component in react and I want to test it but I cannot find a way to mock the setInterval in order to trigger the timer. The count value is 0 all the time but when I run the component it's working. UPDATE: I've added this sample…
Mehran Mirshekaran
  • 37
  • 1
  • 14
1
vote
0 answers

How to test responsive in react testing library and jest dom

I am trying to test responsive behavior of a component with react-testing-library and jest dom. The media query for the code being tested is working correctly in the browser. This is what I have for the setup... beforeAll(() => { …
Yousuf Daramay
  • 127
  • 2
  • 12
1
vote
0 answers

How to write unittest for table row selection using Antd Library in React

I have a react application and I'm using @testing-library/jest-dom for unit testing and antd 3.x library for UI design. In one of my UI screen there is a table and a button where the button only enables when one of the row in table is checked. So I…
ahkam
  • 607
  • 7
  • 24
1
vote
2 answers

React Testing Library - Lazy Loading - Error act()

I have the following simple test file for the component. I based the test on this React documentation https://reactjs.org/docs/test-utils.html#act import ReactDOM from 'react-dom/client'; import { act } from 'react-dom/test-utils'; import App from…
JoaoPedroMatias
  • 71
  • 7
1
vote
1 answer

snapshot testing with react-testing-library and snapshot-diff, get html structure from render method after user actions

I am using react-testing-library in my app and I am trying to use snapshot-diff for snapshot difference testing. Essentially what I need to do is to generate snapshot before and after user action. and pass it to toMatchDiffSnapshot method. But if I…
Anna Presnyakova
  • 33
  • 6
1
vote
1 answer

react-lazy-load-image-component Getting Error "TypeError: Cannot read properties of undefined (reading 'prototype')"

I'm using the React Testing Library, and when the component I'm rendering contains a LazyLoadImage from "react-lazy-load-image-component" I get the error "TypeError: Cannot read properties of undefined (reading 'prototype')". Here's a picture of the…
Wisnu
  • 337
  • 4
  • 16
1
vote
0 answers

React testing library fireEvent.click error null

I am getting an error in jest where the click event is not firing but the change event is working. I check the button is in the document before but still throws an error. I'm getting the following error in jest: Expense Tracker App › should add a…
Ansir
  • 27
  • 5
1
vote
0 answers

Why in React testing library fireevent.change not working from parent component?

The component i am testing is taking onChange function from props. This is main function that has a child component SingleText:
Mahmood Ahmed Khan
  • 235
  • 3
  • 9
1
vote
0 answers

How to pass in the initial state of the component

I have a React component and I want to test it with React Testing Library. The component has an initial state but I want to override it for my tests and provide a custom initial state so I can test various things. How to I do that in Jest? function…
Ansir
  • 27
  • 5
1
vote
0 answers

fireEvent.click with parameters

I have a radio button that when I click it calls a function with two parameters in the function (value and step), and when I make a test with testing librairy I would like that when I simulate the click of the button I return the two…
Greg-A
  • 772
  • 1
  • 19
  • 41
1
vote
1 answer

How to properly mock a function returned by a React hook, inside a module that contains multiple hooks?

I have a custom React hook file that looks like this (contains multiple hook functions), and I want to mock the handleSubmit that is returned by only one of the hook // useHook.js export function useFirstHook() { // calling useStates... const…
0x5929
  • 400
  • 1
  • 4
  • 16
1
vote
0 answers

What is the best way to test how many times is a component being rendered during a map using React Testing Library + Jest?

I have a component InvoiceItem which should be rendered as many times as the number of invoices in an array. Let's say I have an array called filteredData which I then map it as such: Invoices.js function Invoices() { return ( …
Owenn
  • 638
  • 1
  • 6
  • 23
1 2 3
…
99 100