Category "react-testing-library"

Testing hover state hooks

I created this useHover hook: import { useRef, useState, useEffect } from 'react'; export const useHover = () => { const [value, setValue] = useState(fals

How to set intellisense for react testing library using typescript

I just downloaded Create-React-App which uses react testing library. I do not get intellisense when I use it's methods (Example : toBeInTheDocument) . How to se

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 anyt

(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 t

How to mock axios.create([config]) function to return its instance methods instead of overriding them with mock?

I'm trying to mock axios.create() because I'm using its instance across the app and obviously need all of its implementation which is destroyed by the mock, thu

React router - useOutletContext testing

I'm using react-router V6 and trying to test the new feature of useOutletContext. my testing library is testing-library/react and I'm not sure how to pass the C

Apollo reactive variables - how to mock value of the variables into a component during testing

I need some help. I'm a newbie in apollo client reactive variables. There is a component where the displaying of the message depends on a variable that values f

how to test button that call submit form using jest and react testing library

so I am trying to test that the onSubmit function is getting triggered if the button is clicked - the way im doing this is through testing the internals of the

Testing onClose callback which is triggered by clicking outside component

The popup has a click away listener which closes it when a click event occurs outside the component. I need to test that the popup has closed. it.only('clicking

How to test react component based on file reader emitted events

I have a react component called FileReader based off Dropzone react component (https://github.com/react-dropzone/react-dropzone). This file reader calls a callb

How to test CSS properties defined inside a class with react testing library

I am trying to test CSS properties that i have defined inside a class in css, wing the react testing library. However I am unable to do so. Adding the simplifie

userEvent in React Testing Library Doesn't Cause onClick To Be Called

I'm trying to run a really simple test with react-testing-library where a button is given a mock function, the button is clicked, and the test checks that the f

toHaveStyles not working with module.css styles using React testing library with Jest

I have this component for which I am writing test case using react testing library I am facing an issue with styles when the styles is imported from .module.cs

How to test if React component is returning null or its children using React Testing Library?

I have a React component that returns its children to be rendered by React if the prop isTrue is truth-y. If its prop isTrue is false-y, then the component retu

Rerender and useDeepCompareEffect don't seem to work together well

The answer to this question may very well be "don't do that", but I'd like to understand the behavior better. I have a simple tree component that I want to rere

How to test that my input has a ref attribute?

I am using React Testing Library and I have a component that takes in a prop value for a ref that will be used within a <input />. const InputComp = (ref)

React Testing library custom setup import test-utils: module not installed. Unable to resolve path

I'm trying to configure jest absolute path for my custom test-utils directory (https://testing-library.com/docs/react-testing-library/setup#configuring-jest-wit

Jest: ReferenceError: global is not defined

So I am writing unit test using "react-testing-library" on Jest and I have this error: Test suite failed to run ReferenceError: global is not defined

Jest Cannot read property 'createEvent' of null

I was trying to mock rejected value and got this error. It's weird that this construction works in the case of "success" addUser.mockImplementation(value =>

How to mock react custom hook returned value?

Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); c