Questions tagged [react-testing-library]

Questions about testing React components with the react-testing-library utility.

Filter by
Sorted by
Tagged with
0 votes
0 answers
4 views

Why won't this find the refreshControl Element - React Native w/ Jest

When I call to get the refreshcontrol, it returns an error saying that its not found, what am I doing wrong? Additionally, when I print all elements right after calling getAllByTestID, it only returns ...
  • 1
0 votes
0 answers
11 views

Mock submit doesn't seem to fire in unit test

Excuse me if I've done something obviously wrong but at the moment I know enough of this stuff to be dangerous. I'm trying to write a set of unit tests for this custom component: import axios from '...
  • 189
0 votes
0 answers
20 views

How to mock a React component method with Jest

I have a Parent and Child React components, the Child component is a form that use React-Hook-Form library and i expose the handleSubmit to the parent beacause the submit button is in the parent. ...
0 votes
1 answer
19 views

react testing libray test components with side effects

I have a react component called Home.In here I have a button called Refresh. I do want to write a unit test using react testing libray and jest to make sure the button rendered correctly. This is my ...
0 votes
0 answers
10 views

react testing library - userevent.keyboard v14

while I use: await event.type(nameField, data.name); my field is updated with the text and tests pass but while using: await event.click(nameField); await event.keyboard(data.name); the text ...
3 votes
1 answer
20 views

React testing library- how to assert intermediate state between async function?

When I am testing the component in browser, it works fine. Upon button click, the text changes to 'bye'. Few seconds later, it changes back to 'hi' when data fetching is done. But in Jest, it could ...
  • 163
-1 votes
0 answers
14 views

React testing libray write unit tests for components wrapped with a provider

I am new to unit testing with react testing library and jest. I have a header component and want to test whether the header component renders a text called 'cocktail' or not. I write a very simple ...
0 votes
0 answers
21 views

Jest functional/ unit test serve assets from public folder

My react functional component returns viewers from the third-party npm package. which renders another SPA in the iframe, all the assets required for that SPA are in my public folder. While unit ...
0 votes
0 answers
25 views

Testing a component in a microfrontend application

I have created a splitter component in utility app of my microfrontend and I made use of the splitter component in dashboard app. How can i write unit tests in dashboard app ? Also Im not able to ...
  • 9
0 votes
1 answer
21 views

How to correctly test a component with several divs displaying values, from an object, that could possibly have duplicates

I have been following React Testing Library and Jest: The Complete Guide by Stephen Grider on Udemy. In lecture 58 I noticed that one of his solutions for a test would actually fail. The example he ...
0 votes
0 answers
12 views

React testing library with mocha - mocking api call in test fails

I have a page that I want to test. These are the components that I am testing: export const Header = memo(() => { const { caseId } = useCase(); const { api } = useApiData(); const { ...
  • 1,884
0 votes
0 answers
7 views

What is the use of maskClassName in PrimeReact sidebar?

How to find text by substring in react testing library? I see there's the "exact" option to search by substring but how to set it to false and send the option? What I'm using is; Screen....
2 votes
1 answer
34 views

React testing-library not testing component containing <Link/> react router dom V6

I am trying to write units tests for this component const HomepageVideos = ({ place, close }) => { return ( <> <Button className="mt-2 ms-2 close" ...
  • 43
-1 votes
0 answers
27 views

How to pass setState() method as a prop when testing a react mui select component

I am trying to unit test a mui select component. The component is expecting selectedInputValue and setSelectedInputValue() as props. How to pass state and setState() methods to the select component in ...
1 vote
0 answers
27 views

React-testing-library how to test conditional rendering

I'm new to react-testing, and I'm having problem with testing for this part of my code, because it is a conditional, and when I try to test it, it's assuming it didn't pass the conditional. <div>...
-1 votes
0 answers
16 views

How to check if an element has expected content using querySelector in jest?

i am new to writing jest tests for react. i have html like below, <div class="Box-sc-w3prkm-0 TileGrid-sc-1h3mx"> <div class="Box-sc-w3prkm-0 StyledTile-sc-kimti4-0> ...
0 votes
0 answers
15 views

Vitest mocking: TypeError: window.URL.createObjectURL is not a function

I'm testing with vitest. This module node_modules/azure-maps-control/dist/atlas.min.js uses window.URL.createObjectURL And I'm geting this error TypeError: window.URL.createObjectURL is not a function ...
  • 127
1 vote
1 answer
25 views

How to write test when passing Formik state as a props?

I have two components, ComponentA pass formikBag to ComponentB. I use React-testing library to write test for ComponentB. But when running the test, it shows Invalid hook call. Hooks can only be ...
  • 27
-1 votes
0 answers
19 views

Testing react components with state in @testing-library/user-event always warns me to wrap the state with 'act()'

Why do I need act() to wrap my code, I even copied someone else's code directly and still got this error counter.tsx import { useState } from "react"; export const Counter = () => { ...
0 votes
0 answers
7 views

Mocking 3rd party React component in jest has no effect

I'm using jest with react testing library to provide basic testing for my React app. I have mocked the REST calls with msw. Unfortunately one of the 3rd party libraries I'm using doesn't seem to ...
  • 2,953
0 votes
0 answers
11 views

How can I track a custom hook which is used only inside jsx component using jest

I am trying to test a component in React that uses a number of custom hooks, how can I mock and manipulate the results of these custom hooks in jest for testing I want to override what useCustomFetch ...
0 votes
1 answer
20 views

ReferenceError: BroadcastChannel is not defined using jest testing libray

I'm getting error while runing the jest test case using react-testing library
0 votes
1 answer
41 views

response from "msw" handler stuck on "isLoading" after returning 404 code

I have the following test file: import { renderHook, waitFor } from '@testing-library/react'; import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactPressProvider } from './...
0 votes
1 answer
22 views

when to use userevent and fireevent in react testing library

`test("hover / unhover element", async () => { const DOM = render(); userEvent.hover(DOM.getByTestId("tool")); expect(await DOM.findByText("showing tool"))....
1 vote
1 answer
21 views

useWatch dose not trigger re-rendering in Jest tests

I'm writing tests for the following React component which handle image files with react-hook-form. type Props = { name: string; }; const ImageUploader = ({ name }: Props) => { const { control, ...
0 votes
0 answers
21 views

How to test input validating a button and button opening a modal onPress with react-hook-forms and react-native

I'm having trouble pinpointing any documentation on testing a button validation (enabled or disabled) based on the correct word being typed in an input. Using react-native and react-hook-forms with ...
0 votes
1 answer
34 views

React Hooks - How to test a named function was called inside of componentDidMount in React with Enzyme/Jest

I have a class based component and I'm converting it to Functional component, and I'm having difficulty writing test for it with Enzyme. I'm unable to replicate the componentDidMount behavior for ...
0 votes
1 answer
31 views

How does fetch detect if a request using a relative path is coming from a browser?

I am making a request from a react app using a relative path "/api/test". (an NGINX controller routes traffic to either the api or the react client, so they have the same base url) I found ...
  • 145
1 vote
2 answers
79 views

Error 'Cannot use import statement outside a module ' while testing in Vite

I am working in a Vite project, my goal is to be able to write tests. So I setup Jest and Babel and write a test, but I'm getting an error like this: C:\Users\joaov\OneDrive\Dev Projetos\Projetos ...
0 votes
1 answer
32 views

Testing onChange event in Mui tab component with jest

I'm trying to te`st my functionality which gets called when the value state changes , Im not sure on how to write the unit test case for the scenario. import { TabProps } from "./Tab.types"; ...
  • 9
0 votes
0 answers
47 views

how to test console output for an error in React testing library for axios failure

I have a students component function Student(props) { const [studentData,setStudentData]=useState([]); function getStudentData() { axios .get("myAPI/getStudentData&...
  • 133
2 votes
1 answer
30 views

When I test a mock of a submit handler with two functions in it, why doesn't the second function get called?

I have a submit handler in a React form component that does the following onSubmit: registerForm/index.js import { loginFunction, registerFunction } from "../../actions"; //within ...
-1 votes
1 answer
34 views

Jest Error expected number of calls: >=1 Received number of calls: 0 but mock function is properly binded

I am getting a "expect(jest.fn()).toHaveBeenCalled() Expected number of calls: >=1 Received number of calls: 0" error. My test function is: test("DD cancel", async()=>{ ...
0 votes
0 answers
25 views

Testing React form onSubmit with jest

I have a very simple form component which expects an onSubmit handler. const NoteForm = ({ handleNoteOnSubmit }) => ( <form onSubmit={handleNoteOnSubmit}> <input name="note"...
0 votes
0 answers
13 views

Error when render component in test with custom theme in MUI and jest

Hej, When I use jest.resetAllMocks in test, component which use useTheme hook from material crashes with error Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'matches')] at ...
0 votes
0 answers
14 views

React test with multiple state change broke the render output

I have a component that accept 2 async callback function from caller. In this case ClassA is the caller. I am creating unit test in the component. My component has multiple state, different state will ...
2 votes
1 answer
37 views

How do I test for a tooltip appearing on hover in recharts x react testing library x vitest?

I'm trying to write a test and can't work out why my hover isn't working. The full code is here. I have a recharts chart element, which renders, is responsive, and shows a tooltip containing the ...
1 vote
1 answer
53 views

How to mock a custom hook when rendering a component in react testing library

I've searched all over looking for an answer to this but I can't seem to find one. But apologies if I am repeating a question from somewhere else. I am currently testing a component that uses a custom ...
0 votes
1 answer
24 views

Unable to test radio button in react

I want to create a test for this react component to check that the first radio button is checked, but i got an error: Error: expect(element).toBeChecked() Received element is not checked: <div>...
  • 75
-1 votes
0 answers
12 views

react-modal: No elements were found for selector #root

I have two componente parent and child, child component is importing react-modal, I am trying to test parent component with react testing library and jest But I got this error enter image description ...
0 votes
0 answers
26 views

React testing library finByText exceeded timeout

Problem with findByText method in React Testing Library when using MaterialUI Autocomplete and mock service worker I'm having an issue with the findByText method in React Testing Library. Specifically,...
  • 31
1 vote
0 answers
69 views

How to intercept requests to Firebase API using msw - mock service worker? React app testing

I encountered problems while testing my demo React app. I use msw to intercept Firebase API requests and I continuously keep getting error in my terminal. Please note, that I have Firebase ...
  • 11
0 votes
0 answers
15 views

onFocus event of Antd Select in test

I have a Select component from AntD which fetches its options when gets active. <Select data-testid="test-select" defaultValue="org1" style={{ width: 120 }} ...
0 votes
0 answers
33 views

What's the screen size react testing is using when doing tests?

What's the screen size react testing is using when doing tests, I couldn't find any information about it from the docs? const onPageChange = jest.fn(); test("renders correctly", () =>...
  • 151
0 votes
0 answers
84 views

RangeError: Invalid string length with jest and @testing-library/react

I am creating tests for an Ionic React app. I noticed that when I use a screen.getBy... provided by the React Testing Library, it does not tell me that the item does not exist. Rather it throws a ...
  • 55
0 votes
1 answer
13 views

Does anyone have a way to disable this warning: Warning: [antd: Checkbox] `value` is not a valid prop, do you mean `checked`?

I'm rendering a checkbox compoment from antd v4+ and I have a warnings Warning: [antd: Checkbox]valueis not a valid prop, do you meanchecked? Heres is my code: import { Checkbox, Form, Typography } ...
0 votes
0 answers
46 views

How to mock useSelector

In my component const pinnedLocations = useSelector((state) => state.page.pinnedLocations); const User = useSelector((state) => state.user); In my test file import store from '../redux/store'; ...
0 votes
0 answers
36 views

Attempting to use Jest React Testing Library and webpack have no Idea why I am getting all these errors

I've been trying to implement jest and react testing library to this application that I've inherited and for some reason I've getting all of these errors that I can't figure out. Granted I am trying ...
-1 votes
0 answers
21 views

How to test functionality of Sidebar component in React with React Testing Library?

So I have a root component Which contains both the sidebar component and the main component. My question is how can I test the functionality of the sidebar component with the react testing library? ...
  • 151
-1 votes
1 answer
19 views

How to test switch cases in react testin library

Here's my code, the switch statements are not covering even though i am rendering the component and passing the props and mocking the function in the props as well still the coverage is 0%, mostly it ...

1
2 3 4 5
70