Questions tagged [react-testing-library]
Questions about testing React components with the react-testing-library utility.
3,469
questions
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 ...
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 '...
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 ...
-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 ...
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 {
...
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" ...
-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
...
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 ...
-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 ...
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 ...
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";
...
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&...
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>...
-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,...
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 ...
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", () =>...
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 ...
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?
...
-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 ...