react-testing-library

How to select an option from a select list with React Testing Library

by

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

how to test react-select with react-testing-library

by

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

Consider using the “jsdom” test environment

by

In your package.json, or jest.config.js/jest.config.ts file, change the value of the testEnvironment property to jsdom. package.json “jest”:{ “testEnvironment”: “jsdom” } jest.config.[js|ts] module.exports = { “testEnvironment”: “jsdom” } Important note for jest >28 If you are using jest 28, you will need to install jest-environment-jsdom separately by either: npm: npm i jest-environment-jsdom –save-dev yarn: yarn add … Read more

React testing library on change for Material UI Select component

by

material-ui’s select component uses the mouseDown event to trigger the popover menu to appear. If you use fireEvent.mouseDown that should trigger the popover and then you can click your selection within the listbox that appears. see example below. import React from “react”; import { render, fireEvent, within } from “react-testing-library”; import Select from “@material-ui/core/Select”; import … Read more

react-testing-library – Screen vs Render queries

by

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

Best way to test input value in dom-testing-library or react-testing-library

by

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

How to query by text string which contains html tags using React Testing Library?

by

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