To check or uncheck the checkbox using react-testing-library, you simply want to fireEvent.click the checkbox. There was a discussion about this on react-testing-library Issue #175. In particular, kentcdodds said: this should probably be documented better, but with checkboxes you don’t actually fire change events, you should fire click events instead. But, based on the code … Read more
Add data-testid to the options <option data-testid=”select-option” key={item.key} value={item.key}> {item.label} </option> Then, in the test call fireEvent.change, get all the options by getAllByTestId and check the selected option: import React from ‘react’; import { render, fireEvent } from ‘@testing-library/react’; import App from ‘./App’; test(‘Simulates selection’, () => { const { getByTestId, getAllByTestId } = render(<App … Read more
In my project, I’m using react-testing-library and jest-dom. I ran into same problem – after some investigation I found solution, based on thread: https://github.com/airbnb/enzyme/issues/400 Notice that the top-level function for render has to be async, as well as individual steps. There is no need to use focus event in this case, and it will allow … Read more
Better to use within for this sort of things: render(<MyComponent />) const { getByText } = within(screen.getByTestId(‘my-test-id’)) expect(getByText(‘some text’)).toBeInTheDocument()
The latest recommended option by the react-testing-library author Kent C. Dodds himself is to use screen. The benefit of using screen is you no longer need to keep the render call destructure up-to-date as you add/remove the queries you need. You only need to type screen. and let your editor’s magic autocomplete take care of … Read more
You are right in being suspicious of your testing method in regards to how this testing library wants you to test. The simplest answer to this question would be to use the getByDisplayValue query. It will search for an input, textarea, or select that has the value you are attempting to find. For example, using … Read more
scrollIntoView is not implemented in jsdom. Here’s the issue: link. You might get it working by manually adding it: window.HTMLElement.prototype.scrollIntoView = function() {};
Update 2 Having used this many times, I’ve created a helper. Below is an example test using this helper. Test helper: // withMarkup.ts import { MatcherFunction } from ‘@testing-library/react’ type Query = (f: MatcherFunction) => HTMLElement const withMarkup = (query: Query) => (text: string): HTMLElement => query((content: string, node: HTMLElement) => { const hasText = … Read more
You just render the context with your component. const addItem = jest.fn() render( <AppContext.Provider value={{ addItem }}> <MyComponent /> </AppContext.Provider> ) See Mocking context with react-testing-library
Load the hook as a module. Then mock the module: jest.mock(‘module_name’, () => ({ useClientRect: () => [300, 200, jest.fn()] })); mock should be called on top of the file outside test fn. Therefore we are going to have only one array as the mocked value. If you want to mock the hook with different … Read more