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

How to render and test a component with mocked api

I've just set up a mock test of an api call but now am wanting to know how I could actually test this mocked data against my component. My api call will render a random set of information hence the mock. I want to render my Weather component and…
goatstash
  • 37
  • 4
1
vote
0 answers

Jest - unable to absolute import for image

I tried to test for the component ContactListItem.test.tsx. ContactListItem.test.tsx import React from "react"; import { render, screen, RenderResult } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import…
CCCC
  • 5,665
  • 4
  • 41
  • 88
1
vote
0 answers

How can I mock data on custom hook in react and testing library

I have one component thats use a advanced hook, the advanced hook has been tested and its ok, but I don't know how test the component thats use this hook, with mocking data. The hook test: import { renderHook, act } from…
Taís Regina Moraes Castão
  • 53
  • 4
1
vote
1 answer

While testing error responses, the test fails with the expected error (React/Jest/ReactQuery/Axios/MSW)

I am trying to test error states of the following MSW rest endpoint: import { rest } from 'msw' export const exceptionHandlers = [ rest.post(config.accountApiUrl + '/login', (req, res, ctx) => { return res( ctx.status(500), …
benmneb
  • 1,773
  • 1
  • 15
  • 26
1
vote
2 answers

How to test public functions in Typescript with react-testing-library?

I'm having below setup in my project, whenever I extends the httpService and use the 'this.instance' in any service I'm getting the error. If I use axios.get directly without any interceptors in my service files its working fine. Im new to the unit…
Ajithkumar S
  • 859
  • 7
  • 16
1
vote
1 answer

Testing onChange Event with jest.. onChange is not firing/calling even if we pass onChange function through props. any suggestion

the below code is returned from render method. I am sending index value as 0 through props. i am also sending onChange function through props. but onchange function is not calling when i do npm run test. beneficiary.js {props.isEditing ? …
uday
  • 11
  • 1
  • 3
1
vote
1 answer

ESLint reports "screen not found in @testing-library/vue"

I'm trying to use @testing-library/vue and import the screen method and ESLint reports the following error: "screen not found in @testing-library/vue". // The render function doesn't error but screen yes import { render, screen } from…
Théo Lavaux
  • 1,364
  • 3
  • 22
  • 46
1
vote
0 answers

How to write unit test for render dynamic child component using map function in ReactJS(React testing library)

I have a list of questions in my array. Inside that array, there are questions, options, type, id. I am rendering a component and using map function to iterate the array. If array has found type 'Radio', I'm rendering another component…
Chomu
  • 214
  • 1
  • 10
1
vote
0 answers

Can't test component that uses pdfMake

I want to test a component that uses pdfMake. When I import the component into my test file I get the error. TypeError: Cannot read properties of undefined (reading 'pdfMake') 20 | import DirectionsBusIcon from…
Paul
  • 776
  • 1
  • 5
  • 18
1
vote
2 answers

React testing library in Typescript

I'm following a tutorial on React.js testing Library and trying to follow along in Typescript. Although after following along with the first test I'm already encountering a few issues and am wondering what should be different in a test written in…
code4cash
  • 67
  • 1
  • 2
  • 10
1
vote
0 answers

How can I test a React component that relies on Redux Toolkit useSelectors?

I'm trying to write tests for my React component that works with Redux Toolkit. I'm currently getting an error that states TypeError: Cannot read property 'map' of undefined 666 | const fraudValuesByCategory = stateReport.fraud_types …
London804
  • 1,072
  • 1
  • 22
  • 47
1
vote
1 answer

Jest test fails on a react component which uses react-hooks-form with sharing refs

Here is the abstract version of my component const Test = () => { const { register } = useFormContext(); const mRef = useThirdpartyHook(); // Third party hook returns a ref const { ref, ...rest } = register('test'); return (
user3362908
  • 433
  • 5
  • 16
1
vote
0 answers

userEvent.type adds back previously typed characters after asserting input value is empty, and typing new values

so I had written a sample test case for an input, where if I press enter it clears the input field. It works till this point, but when I try to type after that, somehow the previously typed text comes back as part of the input value, and it's…
lanxion
  • 1,350
  • 1
  • 7
  • 20
1
vote
2 answers

React component doesn't update while testing with react testing library

I am struggling to understand why this component doesn't update after I click on it with userEvent. I have a search bar, when focused === true, it expands, and has another field "Move in". This is my test that doesn't work and I don't get the search…
illyria
  • 324
  • 4
  • 19
1
vote
2 answers

What is the suitable type for renderHook in react-testing-library and TypeScript?

I wanna test a custom hook with react-testing-library therefore, I add this code into beforeEach: let renderedHook ; beforeEach(() => { renderedHook = renderHook(() => useFetch()); }); test('.....', () => { …
Martin Rützy
  • 415
  • 1
  • 11
  • 22
1 2 3
…
99
100