Questions tagged [react-testing-library]
Questions about testing React components with the react-testing-library utility.
2,611
questions
0
votes
0
answers
5
views
Mock navigator object in React testing library
I'm using navigator to detect the camera settings in the browser. Below is excerpt from my React component.
navigator.mediaDevices
.getUserMedia({ video: true })
.then(() => {
...
0
votes
0
answers
6
views
rendering component cannot read properties of undefined (reading 'length') in react-testing-library
While rendering the component getting error:
"rendering component cannot read properties of undefined (reading 'length')"
My Test code:
describe("ForgotPasswordEnterCode", () =...
0
votes
0
answers
21
views
How to toggle a variable using React Testing Library for React function component?
I am trying to write unit tests for a functional component which goes like this -
import React, { useState } from 'react';
type Props = {
showPopup: boolean;
id?: string;
togglePopup: () => void;
...
0
votes
0
answers
10
views
What currect way to test react hook that expect to update it internal stat over rerender
let assume I have that hook
function useTest(initValue=0) {
const value = useRef(initValue)
useEffect(() => {
value.current +=1
})
return value.current;
}
And I want to ...
0
votes
2
answers
52
views
How to test if button was clicked?
I'm working with React Testing Library. The problem I have is that fireEvent doesn't trigger, and the error throws, is following:
Expected number of calls: >= 1
Received number of calls: 0
...
0
votes
1
answer
29
views
Test with userEvent.keyboard() does not pass, however it works in the browser
I have the following test written with React Testing library. When I check it out in the browser, it works. However, here it doesn't work. What can be wrong?
it('Calls search callback on enter key ...
0
votes
0
answers
14
views
What are the corresponding testing-library/react versions for react 16.8.6?
I'm trying to make a typescript frontend but I can't use the react-dom/client import because of an issue that I've narrowed down to my testing-library/react version not corresponding with my react ...
0
votes
1
answer
16
views
React testing library only works for inline styles
I'm trying to test if an element has the proper styles. However this only works when I add inline styling to the element. I'm also using css modules, so I'm not sure if that is the problem.
The test
...
0
votes
0
answers
22
views
fire event does not change input value with react testing library
I fire a change event for the input with 'defalut' string, but the debug function's output shows the input value is still the 'defalut' string, here are component file and the test file.
index.ts
...
0
votes
0
answers
29
views
Redux Saga mock onSuccess and onError response from the API
I'm new to redux-saga and i'm trying to make some api calls using the redux-saga as well as trying to write some unit testing using the Jest. But i'm not able to mock the onSuccess and onError reponse ...
0
votes
1
answer
19
views
React Testing Library render leaking between tests
I'm currently writing some tests and noticed that the rendered screen is being carried over between tests.
The following 3 tests are being affected:
describe('rolls', () => {
it('are ordered', ...
0
votes
0
answers
15
views
React Testing Library Not Parsing JSON
I have a TextArea component that takes JSON {"someKey": "someValue"}. When I inspect the dom, {"someKey": "someValue"} shows up just fine in the inspector.
...
1
vote
0
answers
44
views
How to test useEffect call of child component using jest and react-native testing library?
I use react-native and react-native testing library with jest. The component structure is as follows.
function doSomething(x) {
return x.map(i => i)
}
const ComponentA = (props) => {
...
2
votes
1
answer
52
views
Testing back button using react router and react testing library
I have a component which allows users to navigate back in history using react router v6's useNavigate hook. However, the test seems to fail when I call the function with navigate(-1) but passes if I ...
0
votes
1
answer
20
views
Assert that a function changes a stateful value
So, here is a simplified version of my code.
This is my custom hook.
export const useStep = () => {
const [step, setStep] = useState<Steps>("sending");
const changeStep = (...
0
votes
0
answers
7
views
setTimeout callback is not being called in UNIT TESTS even after using fakeTimer and runAllTimers
I can't figure out why the callback passed to setTimeout is not called in my unit tests even after using jest.runAllTimers. The useEffect is called but the timeout callbacks aren't called and not ...
0
votes
1
answer
22
views
Best way to test utility function with Jest + React Testing Library
I have this function which I hope to return the url added with the parameters
export const addParamsToURL = (
params: param | param[],
url?: string
): string => {
if (!url) return ''
const ...
0
votes
1
answer
24
views
Should you render components / select elements in each `test()/it()` block or globally?
In react-testing-library you have to render your react component before executing some tests on its elements.
For several tests on the same component, should you avoid
rendering the component ...
0
votes
2
answers
36
views
mock function error in react-testing-library
Hii Everyone I am new to react testing ,I am trying to do some example for practise , I am getting a Error,Need your help , this is my App Component
const[firstName,setFirstName]=useState("&...
0
votes
0
answers
10
views
Triggering onChange event for dropdown and calender component of Prime React from Test file
Can anyone please tell how to trigger the onchange event for dropDown component of prime react?
Tried firevent.change() and tried using class name also. Not working.
Can anyone suggest any other way?
...
0
votes
1
answer
20
views
Perform an integration test on a react component where the text input uses debounce (using react testing library)
I'm trying to test a react component that contains a list of results, and a text input that the user can type into in order to filter the results. A 100ms debounce is used to delay the filter as the ...
0
votes
0
answers
33
views
How to test large components using react-testing-library
I have to write test cases for a scenario.
I have component <PageA /> which on mount calls an API and brings some data. When API call is in progress we show a <Spinner /> and when data is ...
0
votes
0
answers
9
views
selecting input for test by name. React-testing-library and Jest
Is there any way I can select this Formik Field <input/> in react-testing-library
<Field
style={inputStyles}
onChange={handleChange}
...
0
votes
0
answers
17
views
How come react query isn't working for my select box for my react-testing-library?
I am getting an error no matter what query I use in React-Testing Library. Whether it's getByText, or getByRole, or as seen in the the code example below getByDisplayValue, I get an error saying ...
0
votes
0
answers
21
views
jest/react-testing-library ant-design/chart worker error
test case execution fails while using charts from @ant-design/charts, I even use jest-canvas-mock but the issue didn't resolve, here is screen shot .
0
votes
0
answers
20
views
TypeError: _axios.default.get.mockResolvedValueOnce is not a function
I'm trying to write a test using React-lIbraries and Jest.
The test should render a mock axios that produces the mock data I've interested but I keep having the following error:
TypeError: _axios....
0
votes
1
answer
24
views
Cant find setup() on userEvent
I am trying to use the user-event utility in testing library as described here :
https://testing-library.com/docs/user-event/intro
Unfortunatley when I try and call the setup function
userEvent.setup()...
0
votes
1
answer
23
views
Tell jest to ignore firebase/* when testing
I'm trying to test visual aspects of a react component, when rendering my component in a test my tests fail due to an "unexpected token export" that I believe is coming from firebase.
I don'...
1
vote
0
answers
23
views
E2E vs Unit Testing - Querying priority
When I was reading about querying in e2e and unit testing I found one inconsistency. According to the official Cypress documentation, it's very recommended to query tested elements by using custom ...
0
votes
1
answer
38
views
Custom React Component Library - jest 'cannot find module react'- testing-library, rollup
I'm building a custom react component library to share with other applications. I'm using rollup and following this blog and a few others: https://dev.to/alexeagleson/how-to-create-and-publish-a-...
0
votes
1
answer
24
views
fireEvent.click(button) causing error **Call retries were exceeded at ChildProcessWorker.initialize**
One of my unit tests is failing when I'm trying to fire a click event on a component. The component is being rendered and is enabled.
//component
import {makeEncryptedCall} from '../../foo';
const ...
0
votes
0
answers
6
views
How Can I Test an MUI ToggleButtonGroup with a userEvent?
I am using MUI ToggleButtonGroup component like so:
<ToggleButtonGroup
color="primary"
value={mode}
exclusive
onChange={changeHandler}
fullWidth
...
0
votes
1
answer
21
views
How to mock ref which type is MutableRefObject<HTMLElement>
Let's say we have a function as shown below:
import { MutableRefObject } from 'react';
export const test = (ref: MutableRefObject<HTMLElement>): void => {
if (ref.current) ref.current....
0
votes
0
answers
19
views
How can I test chrome.storage.sync.get() value with Jest?
My React component contains a handler like this one which is called in a onClick function of a button:
const handleSaveInformationButtonClick = () => {
chrome.storage.sync.set({ information }, (...
0
votes
0
answers
34
views
Unit test Google tag manager Initialization and events
I am trying to Unit test Google tag manager code in React project. Following is what I want to test precisely:
If Google tag manager is initialized with given properties
Check if events are getting ...
-1
votes
0
answers
14
views
OnVisibleChange testing using react-testing-library
I want to write the test case that would cover the functionality of -> clicking outside or hovering outside of the antd dropdown menu, the dropdown closes. I have tried, first clicking on a button ...
0
votes
1
answer
21
views
React testing-library to simulate touch and move, what is the key for a pointer?
I want to simulate a user touching an element and moving it. But I don't quite get what is document says.
A touch pointer only exists while the screen is touched and receives a new pointerId every ...
0
votes
1
answer
34
views
Test modal component within another component
I'm trying to test a component that should open its modal. Modal is a part of this component, but it's rendered with createPortal(). I first check if modal exist in the document and after button click ...
0
votes
1
answer
57
views
Mock Service Worker returns empty
I'm new to react testing library. I am trying to test a simple component that call some apis
and then it fills inputs with the data of these apis. But when I run npm test it keeps showing me this : ...
0
votes
1
answer
33
views
Reset date value in antd datepicker(react-testing-library)
I want to test the functionality of clicking on the clear icon that appears on hovering on the antd datepicker but it's not working for me.
it('should clear start date', async () => {
...
1
vote
1
answer
33
views
Why does a react component, tested with React Testing Library has issue with react-intersection-observer?
I wrote a component built with react 17.0.2 that uses react-intersection-observer 9.1.0
import { useInView } from 'react-intersection-observer'
...
const [ref, inView] = useInView({
...
0
votes
1
answer
31
views
Test onClick of a button is called when there is no props passed down to it using testing library react and jest
I have a component for an upload button which calls the ref of an input when clicked:
import { useRef, FC } from 'react';
import Button from '@mui/lab/LoadingButton';
const UploadButton: FC<...
0
votes
2
answers
26
views
jest TypeError: Cannot read property 'createRef' of undefined
ImageSlider.tsx
const ImageSlider = (props: INF_ImageSlider) => {
const [idx, setIdx] = useState(0);
const imgRef = React.createRef<HTMLImageElement>(); // <---- Error here
// ....
1
vote
1
answer
61
views
Angular Ag-Grid row group empty render when querying DOM elements with angular-testing-library
I have an ag-grid that contains different columns and column groups, as well as row groups.
I am trying to test the DOM elements displayed in the row group using Jest and Angular Testing Library. The ...
0
votes
0
answers
14
views
How many render operations does act() support?
I am using act function from library https://testing-library.com/docs/react-testing-library/intro/.
At this point I have something like this:
await act(async () => {
page = renderPage([...
1
vote
3
answers
83
views
How to test for document being undefined with RTL?
I have the following react hook which brings focus to a given ref and on unmount returns the focus to the previously focused element.
export default function useFocusOnElement(elementRef: React....
0
votes
0
answers
4
views
How to create empty xlsx file and a xlsx file with two columns a,b
I need to test empty file and file not following the template.
This is what I have tried:
const file = new File([''],foo.xlsx,{type:'.xlsx'})
0
votes
1
answer
16
views
How to mock useRouter parameters for react-hooks-testing-library?
I have a custom hook, which has structure of:
const urlHook = () => {
const router = useRouter();
const read = () => {
return validate(router.query.param);
}
const write = (params) => {
...
0
votes
1
answer
40
views
How to get React Testing Library's userEvent to type into an input
I can successfully implement a test with React Testing Library's fireEvent method, but when I try equivalent tests with userEvent I can't get it to trigger anything. How can I fix this?
CodeSandbox
/...
1
vote
1
answer
34
views
(Apollo client v3) useLazyQuery custom hook testing
I was struggling with a test issue for my custom useLazyQuery hook. My first test is passing but the second one is failing. What am doing wrong for the second test?
Here is the useLazyFetchCoin.tsx
...