I am using react jest with react testing library to test my component. I am facing a weird issue. I am using debug, returned by render from testing-library. test('component should work', async () =...

When testing components with <Link>s, for example in my answer to Recommended approach for route-based tests within routes of react-router, I often use the following pattern to get access to ...

I'm using the getByTestId function in React Testing Library: const button = wrapper.getByTestId("button"); expect(heading.textContent).toBe("something"); Is it possible / advis...

I need a way to test a component in which two other components are lazy loaded. We are using webpack module federation. So here ComponentOne and ComponentTwo are micro-frontends that are lazy loade...

I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones: const News = () => ( <div> <h1>News</h1&...

I have a structure like this: <div data-test-locator="MyId"> <input value="some" type="checkbox" checked /> </div> I need to test if the checkbox is checked. But how can I ge...

Having a basic component which uses react-hook-form: const { handleSubmit, reset, control } = useForm({ resolver: yupResolver(schema) }); ... <MyComponent title='title' open={isOpened} contr...

I cant seem to find much/any docs on this really simple thing I'm trying to achieve I have a dropdown that is display: none. when I click a checkbox it becomes display: block all I'm trying to ass...

My component has two similar forms (two forms with username/password fields), and two Submit buttons with the text 'Submit'. In order to test the submit handler, I'm mocking the type event for the ...

The Problem: I am trying to use jest and React Testing Library to mock a functional component that is wrapped in React.ForwardRef(), but I keep getting this warning (which is failing my test): Warn...

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 Context data in the test. In the TSX c...

I'm trying to introduce React Testing Library into Create React App project, and I'm hitting a strange problem. For one of my tests, I need to use jest-dom, but I can't seem to import it successful...

I'm trying to use userEvent for testing UI interaction. However, it does not seem to work properly. I used this document as reference. Is there some necessary setup in order for it to work? Here's ...

Problem: UserEvent.type is not working. I have a simple test where I get the textbox, which works, but when trying to type in that textbox, the text does not display. Most of the solutions I have s...

I have styles applied to a button via a css sheet. When the app starts the button has only a .Button class. When the button is clicked an extra .clicked class is added, which then modifies the styl...

I'm rendering an element that makes use of a setTimeout to change the inner text from a loading state to a desired message: function Message({ message }: any) { const [showMessage, setShowMessage]...

I have a React+vite app for which I'm writing test to cover the front-end routing redirection logic at application startup. Routing is handled by react-router v6, and all components associated with...

I have a screen with some form, and on submission, I send the request to back-end with axios. After successfully receiving the response, I show a toast with react-toastify. Pretty straight forward ...

I'm writing some tests for a React app using Testing Library. I want to check that some text appears, but I need to check it appears in a particular place because I know it already appears somewher...

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 ...

Using React Router DOM (v6) with React Testing Library, I would like to know if there's a way to deal with "mocked" history from createMemoryHistoryor an alternative like it. Based on the...

I'm getting this error below on the "global.fetch" part and I'm not sure why. I feel like I'm doing it a pretty standard way..what am I missing? I'm open to anything even libraries.. I'm ...

For some reason, my custom tsconfig file isn't being picked up in jest.config.ts. Here is my jest.config.ts: module.exports = { setupFilesAfterEnv: [`./jest.setup.ts`], testEnvironment: `jsdom`, ...

I am setting up a monorepo in which I am building a react app where I will be using typescript. We want to use jest to test backend features and React-Testing-Library to test frontend features. Sho...

in my code, i have component that using react-ace. in my render function i have this row: <CodeEditor onChange={onCodeChanged} value={code} /> callback function: const onCodeBodyChanged = (n...