Category "react-testing-library"

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

How to mock and check that a function from a library in Jest framework?

I have a button with "Download" text on it defined in ReactJS code. Now, I want to write a unit test to check that this function is getting called when this but

How to mock a single value in a React Context provider while keeping the rest of values

Hi I have a context provider which returns like this: return ( <RepeatsSidebarContext.Provider value={{ loading,

Testing a Next.js app with a custom /pages/_app.js in React-Testing-Library

I'm attempting to follow this guide in Reat-Testing-Library documentation to wrap all the components I want to test. I'm doing this because I need access to the

React Testing Library: how to use screen in this case instead of container

in react testing library, as per the conventions, it is better to use screen than to destructure the methods from render. I have a component, where I need to te

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[fi

Spy on a function inside functional component using React testing library

I'm trying to spy on a function inside a function component using react testing library. I wanted to test whether handleClick function has been called whenever