3,778 questions
0
votes
0
answers
9
views
React: Cannot enter a value while testing NumericFormat embedded in Controller
I have a NumericFormat as part of a react-hook-form Controller which vitest renders with jest-dom. When trying to enter some test data into it, its value does not change.
The Component:
// ...
- 598
-1
votes
0
answers
19
views
React Component not found during unit test (using jest and react testing library)
I'm working with an Autocomplete component in React where I need to conditionally render a "Load More" button based on the option.is_for_load_more property. However, the component is not ...
- 85
0
votes
1
answer
42
views
How to unit test a form using the useActionState hook?
I want to test a form with the useActionState hook. It does use simply async function, not a server action. I would like to assert the state to be incremented, but the test fails even before I can ...
- 1,187
-1
votes
1
answer
22
views
A wall of red errors when testing MUI Datagrid
I am introducing tests into my project and the thing I've encountered is that when I test the whole page component MUI datagrid table gives a wall of errors making it almost impossible to understand ...
-1
votes
1
answer
91
views
cannot detect installed react-router-dom package when running unit tests
I want to learn react testing library with react-router-dom. I created the app using npx create-react-app command. The resulting code already has an App.test.js in the parent folder:
import { render, ...
0
votes
1
answer
18
views
I can't run jest snapshot tests because im constantly getting the ''Warning: Invalid hook call."
My components are working correctly, but I need to build snapshot tests for my react project, and I can't because of this error.
My data tests are running correctly.
Login.jsx
import React, { useState ...
0
votes
0
answers
12
views
Jest.mock UT is not working as expected for external library
I am trying to write UT for my utility function, which involves an third party library, refiner-js.
Now, ideally this should work, but on running the tests, it shows this error and fails the test:
...
0
votes
0
answers
41
views
Testing different environment variables
We are running tests that test various settings for an environment variable. We need to be able to set the environment variable differently for different tests, and therefore cannot simply import an ....
0
votes
0
answers
120
views
Error: Vitest failed to access its internal state
I'm creating a utility package that exports multiple tools like eslint, playwright, vitest, react testing library etc, and I'm using rollup to bundle the package.
However, when I install this package ...
- 1,697
2
votes
0
answers
42
views
React 18.3 causes a lot of `act` warnings in tests
I have the following component - "A toggle button":
// ToggleButton.tsx
export function ToggleButton() {
const [isEnabled, setIsEnabled] = React.useState(true);
return (
<button
...
- 2,001
0
votes
1
answer
36
views
Antd Select component does not show more than 2 options in tests
After going crazy around a test that refuses to pass, I realized that the Select component in the Antd library does not handle more than 2 options. I wrote the following test to explore the issue:
...
- 833
0
votes
0
answers
58
views
How to test custom hook with useEffect in React 18?
Hook:
import { useEffect, useState } from "react";
const useIsClient = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
...
- 100k
0
votes
0
answers
31
views
Im unable to get MSW to fire off while running a Jest test in my react app
I have a feeling this is JEST running through the test too fast. But wanted to throw some feelers out there.
Here is my test file
import '@testing-library/jest-dom'; // Add this import
import { http, ...
- 121
-1
votes
1
answer
24
views
React Testing Library - mocking event.target.href automatically prepends domain upon click
I have a simple component like so:
const MyButton = ({ onLinkClick ) => {
const handleClick = e => {
e.preventDefault()
onLinkClick({ href: e.target.href, foo: 'bar', baz: '...
- 11.7k
-1
votes
2
answers
71
views
Why is function never called in test
I need help regarding a specific test. I have a Component, that is toggling the sound on and off in my project. The last test, with which I try to test if the e.prevenDefault gets called does not work,...
- 9
0
votes
1
answer
31
views
Cannot mock useMutation using MockProvider
I have been using MockProvider from Apollo Client successfully in mocking normal GQL queries, but when I try to mock mutations it does not seem to work.
If I try to mock a useMutation using the ...
- 13.4k
0
votes
0
answers
25
views
Jest test code fails with navigation and jest function
This is the React code
import type { FC } from 'react';
import React from 'react';
import styles from './LeaveConfirmModal.module.css';
import { Button, Modal } from 'react-bootstrap';
import { ...
- 11
0
votes
0
answers
22
views
React 18 update - I need opinions on nuking an Enzyme legacy test coverage to use RTL instead
I just updated a legacy React code (born 5 years ago and no one never updated). What happens is that Enzyme does not run in the 18.x React versions and I had to nuke all tests, for now. The project is ...
- 363
0
votes
0
answers
32
views
What is the right way to compare snapshots with the render method?
My snapshots logs are empty when rendering without an assignment to a var and using the screen from 'react-testing-library':
render(<Element/>);
expect(screen).toMatchSnapshot();
Do I really ...
- 363
0
votes
1
answer
23
views
import not understood by test, resolve error thrown
When I run the test getting the error as:
Error: Failed to resolve import "@/components/card/LoadingCards" from "app/page.tsx". Does the file exist?
Plugin: vite:import-analysis
...
- 15.3k
0
votes
1
answer
31
views
React Unit Test Not Able to Find an Element with Using Async Act
I am testing user click interaction with using Jest and RTL in my React app. Component states are updating with user interaction, i.e., a click event.
My component has one combo box. When clicked, it ...
- 146
0
votes
0
answers
38
views
How to Thoroughly Test PrimeReact AutoComplete Component with API Handling and Virtual Scrolling in React?
I’m working on a project using PrimeReact’s AutoComplete component to search customers by different criteria (e.g., name, mobile number, etc.). The search suggestions are fetched from an API, and the ...
- 105
1
vote
0
answers
19
views
Why do my React unit tests fail for my login form when I add a <Link to the register form? [duplicate]
I have several unit tests that test form validation for my login screen.
Example:
test("Invalid email renders error", async () => {
render(<LoginForm />);
// Arrange
const ...
- 2,048
0
votes
0
answers
161
views
Can't setup MSW for testing with Vitest and React Testing Library
When running the test, I'm getting an error: Error: No known conditions for "./browser" specifier in "msw" package. But nor the test neither the component doesn't use MSW.
The test:...
- 17
0
votes
1
answer
32
views
Style Props of Button component doesn't apply in screen.debug
Im kinda new with the React Testing library. But I'm having a strange issue found during testing. Here's is my setup and code.
on ../testUtils/rtl
import { ChakraProvider } from '@chakra-ui/react';
...
- 123
0
votes
0
answers
42
views
React Testing Library element.click vs fireEvent.click
What is the difference between testing the click of a button by triggering it with element.click vs fireEvent.click (RTL doc).
Here an example:
import { expect, vi } from 'vitest'
import { render, ...
- 1,355
-1
votes
1
answer
33
views
How to write tests for state changes in React that affect other components in the UI?
UPDATE: I added a waitFor() for my expect(input.value) and was able to get rid of the act error. However, my test is still failing.
I want to test once a valid wallet address is typed into the ...
- 103
1
vote
0
answers
29
views
Unable to trigger handler's REST API call
I am writing mocks responses (using MSW) for a test case for an API call when a page is rendered in vitest and I am unable to trigger the REST API call defined in a handler.
Technically, if the API is ...
0
votes
2
answers
279
views
How to test shift+tab key press in React Testing Library?
I have this simple test in React Testing Library. I am using RTL version 12 and "@testing-library/user-event" version "^13.5.0". Moving focus with userEvent.tab() works well, but ...
- 611
1
vote
1
answer
101
views
It is possible to improve even more?
I have a big React app with 4205 Jest test running in a CI and it is taking more than 40 minutes to run all the tests. This amount of time is normal?
Versions:
NPM: 7.24.0
Node: 16.10.0
@testing-...
- 1,249
1
vote
0
answers
72
views
Mock Function in Custom Hook
New to JavaScript, React, and Jest. I have been struggling with writing a Jest test for the sort functionality of a custom hook.
I am basically trying to mock getRegionOptions() so that it returns [&...
- 19
2
votes
1
answer
52
views
Input still gets values even if disabled in React Testing Library
I have this test (React, Vitest & Testing Library):
import { describe, expect, it } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
describe('App button Problem'...
- 1,936
0
votes
0
answers
39
views
Testing an element outside of the root div, is it possible?
I'm using yet-another-react-lightbox and need to write a basic test that make sure that the light box opens upon a button click.
Upon click the library adds the element to the DOM, yet outside of the ...
- 130
1
vote
1
answer
197
views
How can I write a test for selecting an item from a Select component that uses Portal?
I am writing a test for a Select component using the shadcn/ui package. This component has some parts (such as selectable items) that are rendered inside a Portal. Because of this, I’m having trouble ...
- 45
0
votes
1
answer
47
views
Data not passing in component
I am trying to do the unit testing for the calculation in my component. My issue is that I have created a mockStore but that value inside the mockStore is not passing the data to my component. Hence ...
0
votes
0
answers
33
views
Jest testing error: TypeError: (0 , import_redux2.combineReducers) is not a function
Here is an error that I'm unable to fix for weeks.
I'm trying to test my <App /> component using Jest (29.7.0).
The error I'm getting is:
TypeError: (0 , import_redux2.combineReducers) is not a ...
- 9
0
votes
0
answers
52
views
AgGrid method onGridReady not being called on tests with React and Jest
I have an AGGrid with ServerSide.
And when I try to do the unit test in Jest/Enzyme or React Testing Library, it doesnt render the data. Just renders the Headers Columns.
And while the grid renders ...
0
votes
1
answer
510
views
Vitest and react testing library error testing component with useState: TypeError: Cannot read properties of null (reading 'useState')
I'm following some videos about how setup vitest and testing library in my vite project...basically I've installed the dependencies in my package.json
"devDependencies": {
"@...
- 2,324
0
votes
0
answers
61
views
How to do shallow snaphsot testing in React 18
So the story is the following:
I have a React component. I want to unit test the rendering. Previously I've used shallow rendering from enzyme and snapshot testing for this purhose. Let me elaborate ...
- 183
0
votes
1
answer
39
views
How test code in event listener of useRef
My react project consumes a 3rd party SDK that calls a number of events. How can I trigger the events using react testing library?
const el = React.useRef(null);
useEffect(() => {
el.current....
- 373
-1
votes
1
answer
72
views
wait for async event to occur before exiting the tests
I have a component that dispatches an event on load. The listener is outside the component, in this case a Unit Test listening to the event.
const User = () => {
useEffect(() => {
...
- 2,180
1
vote
1
answer
637
views
Testing ShadCN Select with Jest and React testing Library [duplicate]
I have a ShadCN Select component that is abstracted into a CustomSelect component for reusability. I am trying to test the click functionality of the options and assert the text content on the Select ...
- 684
1
vote
0
answers
46
views
How do I test errors in a hook that suspends before it throws?
Using testing-library/react, I can use a combination of renderHook, expect and toThrowError to check that the hook throws an error under certain conditions:
it("throws an error", async () =&...
- 3,070
1
vote
1
answer
106
views
How to mock useMapEvents (which is provided by react-leaflet) in the unit test
I was trying to create a new unit test to mock UseMapEvents but I received an error message that stated "ReferenceError: Cannot access 'map' before initialization".
Do you have any solution ...
- 23
0
votes
0
answers
79
views
React Testing Library: rerender not working
I have this component that I am trying to test, that shows a dialog which accepts images to upload into the app:
import React from 'react';
import { Box, Typography, Dialog, DialogTitle } from '@mui/...
- 57
2
votes
1
answer
90
views
How to spy on useAppDispatch() hook instance using redux-toolkit vitest
Since we can not use the hook useAppDispatch() within our test file, I wonder how can I spy on the returned instance.
import * as redux from "@/core/context/redux/store";
...
it("test&...
- 415
0
votes
0
answers
241
views
Vitest, async await, - The error was thrown, while Vitest was running this test
import React from "react";
import { render } from "@testing-library/react";
import { screen } from "@testing-library/dom";
import MultiSelect from "@/components/...
0
votes
0
answers
26
views
Testing onClick on sidebar item Received number of calls 0
I'm trying to make a call to the navigate function inside an item in my sidebar. In practice, the button is working normally, but when I test it, user.click isn't working, what's wrong in my test code?...
- 137
0
votes
0
answers
102
views
Testing code for infinite scrolling functionality using IntersectionObserver
I'm currently working on a React + TypeScript + React Query project, and I'm having trouble writing test code!
The first piece of code is the MainGrid component, where I am using a custom hook called ...
- 1
0
votes
2
answers
63
views
Remove/Disable HTML output from RTL tests
Is it possible to remove/disable the html output that always spits out when running RTL tests?
My finger is getting sore from scrolling past the HTML output to find the start of the stack trace.
...
- 13.4k