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

Testing tanstack-react-qiery - (wait for is not a function in renderHook)

I want to test this customHook but it's showing me an error of waitFor is not a function. import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { renderHook } from "@testing-library/react"; import {…
Rohit Kumar
  • 95
  • 6
1
vote
0 answers

setState not working in Jest test using React Testing Library

On a given component, I'm mocking an API call which returns some markup for an HTML document. I managed to get the mock working and the mock response is being returned, but my component is not able to set the state with this response. Here's how it…
Jeremy
  • 1,447
  • 20
  • 40
1
vote
1 answer

Testing components with a request for rtk-query

Hello everyone I started testing React app and ran into a problem - I can't test the components that are loaded from the server. Requests for uploading data are made via rtk-query, and I only know how to test this on axios. Code request: export…
ARSync
  • 11
  • 1
  • 4
1
vote
0 answers

Styled component testing for react using 'react-test-renderer' and react testing-library

I am trying to have snapshot for this component but I get error import React from 'react'; // material import { styled } from '@mui/material/styles'; import { Box, Paper, Typography, Container, Grid } from '@mui/material'; import Skeleton from…
Ron
  • 394
  • 1
  • 12
  • 24
1
vote
1 answer

How can I use one spyOn for diferrent case in react?

Here is the problem. I want to add different classes to component if I get different orders from urlsSearchParams. But the value is always the same and the desc test never works. here is the code: describe("", function () { …
jonasdoe
  • 23
  • 3
1
vote
0 answers

React-Testing-Library, Jest ,and MSW testing Error: Error: connect ECONNREFUSED 127.0.0.1:3001

I am testing a component's submit button and the test passes but I would really like this ECONNREFUSED error to go away and understand why this is happening. The line of code that throws the error in my test is await userEvent.click(submitBtn). If I…
AAMCODE
  • 415
  • 1
  • 7
  • 20
1
vote
1 answer

Mocked useState not triggering a rerender React Testing Library

Code Example Hi, I have an unusual test case, it's not working the way I expect. I am testing a component that resides inside of a context in our app. One of the values being passed down by the context is a piece of state as well as the setter of…
CHeffernan087
  • 205
  • 1
  • 3
  • 15
1
vote
1 answer

React testing: mocking useRef

I'm relatively new to react testing, but currently trying to use a few examples I found on the net to mock a React hook - specifically useRef. The code below is what I found in a couple of accepted examples, but I cant understand why the following…
Phil S
  • 123
  • 8
1
vote
1 answer

How to view HTML from getELementsByClassName in Testing Library

I am using the getElementsByClassName on the container object using React Testing Library let e = container.getElementsByClassName("my-Table-row"); How do I view the HTML in "e" ? All I have is something that looks like : Proxy {Symbol(impl):…
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
1
vote
1 answer

Mock canvas toDataUrl without adding another lib

I have an HTML element that uses the onTouchEnd attribute to get the canvas content and convert to a dataUrl, but this is not supported by Jest. Most articles suggest adding the jest-canvas-mock lib to mock all of the HTMLCanvasElement…
juliano.net
  • 7,982
  • 13
  • 70
  • 164
1
vote
1 answer

Jest SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse

I am unit testing a React/Typescript component with Jest and React Testing Library and running into this error: SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse. I understand that you get this error when you try to do…
AAMCODE
  • 415
  • 1
  • 7
  • 20
1
vote
0 answers

successive userEvent.type on the same input does not behave as expected

i'm trying to test a react component with react/testing-library: This is my test: const startDate = document.querySelector('#startDate') as HTMLInputElement; await userEvent.type(startDate, '11/07/2022'); await userEvent.type(startDate,…
JULIEN PICARD
  • 1,364
  • 1
  • 8
  • 11
1
vote
1 answer

Why is Jest not rendering React Router component correctly?

Testing a router component and when I call the screen.debug() in a test after rendering, the DOM output is not what I expected. Why? Test: import { render, userEvent as user, screen, getByRole } from '@testing-library/react' import { Router } from…
AAMCODE
  • 415
  • 1
  • 7
  • 20
1
vote
1 answer

Mocking function in React class component using Jest produces "type is invalid" error

I'm writing tests using Jest for a custom DataTable component. I'm also using React Testing Library. The component loads an iframe when a row is clicked. I'm attempting to mock the function that loads the iframe and I'm getting an error message when…
Clunis
  • 55
  • 1
  • 6
1
vote
1 answer

Testing react app that sends requests to backend via proxy

I have the following simple sample React app the frontend of which runs on port 5000 and the backend Express server runs on port 5001. The relationship between the two is established via "proxy": "http://localhost:5001", in package.json. On the…
savreline
  • 131
  • 1
  • 7
1 2 3
…
99 100