When testing a form, I am using userEvent to type 'hello' into a textbox, then when testing the value of said textbox straight after, using toHaveValue(), it returns the string backwards... render...

I have a React component with a input field and a button disabled at the very beginning. This button's state ( disabled ) changes if input provided by user to input field is validated by API, which...

Ever since starting with @testing-library for react, I'm confused by the name attribute. It is possible to get the reference of a rendered button e. g. like this: // <button>Button text</b...

I have two separate components in two different files ComponentA and ComponentB I have a button in ComponentB Now I wish to test that when a particular button in ComponentB is clicked, ComponentA s...

I have a unit test which includes rendering a component that uses useSWR to fetch data. But the data is not ready before the expect() is being called so the test fails. test("StyleOptionDetail...

In my React app I have a component which embeds an Instagram post. It renders the following HTML structure: <div data-testid="instagram"><iframe class="instagram-media insta...

how to filter the getByLabelText query, if It is throwing an error of the type: TestingLibraryElementError: Found multiple elements with the text of: /to/i, I have the following HTML structure, whi...

I am pretty new to testing and attempting to write what should be a simple test for our project... test('Attempt Login', async () => { const submitHandler = jest.fn( ()=> console.log('hell...

I have a Component and want to unit test it with react jest... I want to test onClick event.. I've tried many cases but they don't cover onClick statement This my Component export default class Hea...

Note: this isn't about simulating the keypress itself I'm creating a component which handles focus based on user keyboard events (like pressing enter, arrows, etc). It'd be preferable to test that ...

Some background: I've got a component that immediately calls a useQuery hook upon loading. While that query is running, I spin a loading spinner. Once it completes I render stuff based on the data....

I'm writing unit test with React testing library and Jest and wants to check if my React Component is successfully able to navigate to next Page. import { fireEvent, render, screen } from "@te...

I have a component that shows a spinner until data retrieval is completed. But I do not take the data from the server, but from indexedDB, using the Dexie library. How I can mock such request. My c...

I am using jest tests to test my React project written in #typescript created with Create React App. I'm using react-testing-library. I have a form component which shows an alert if the form is sub...

I'm new to React and confused about all the testing libraries. I got my test code to work but it seems redundant to have to call create() from react-test-renderer in order to use its toMatchSnapsho...

when user type some text in input search data-testid = 'loading' must be removed, now console return Unable to find an element by: [data-testid="loading"] can some one sugesstion me to wr...

I have code like (kept only relevant code) function App() { const [values, setValues] = useState([]); async function onUpload(event) { if (event?.target.files?.length) { const data = await eve...

So i have something like this from kent c dodd's library that is super useful import * as React from 'react' import {render as rtlRender} from '@testing-library/react' import {ThemeProvider} from ...

I have a test case where I need to mock useRef inorder to return a mock current value. I tried jest.mock but it returns an HTMLDivElement instead. code: const ref = useRef<HTMLDivElement | null...

I´m working on a little component that changes one label based on the size of the screen. I´m using useLayoutEffect() to observe the screend size and change the label when it reaches some limit. im...

I have an async method that changes the state by callback: class Demo{ callback: () => void; async triggerCallback() { this.callback(); } } This callback is being used to hide/show an el...

I have a basic login form made using Formik, just trying to write an RTL and jest code to fill out the details, submit the form, and navigate to the Home page. Therefore, wrote the following: it('...

I'm trying to write a test in Jest. When the fireEvent.click comes after an async it it doesn't trigger the function. This is the exact case where few lines of code are better than hundreds of word...

I have a component which in some circumstances should render nothing (it just returns null). It looks something like this: const MyComponent = ({ renderNothing }) => { if (renderNothing) { ret...

I have a component. It has a button. Upon pressing the button, I am changing the style of the button text (color) using setState function. When I am testing the changed component, the test is faili...