score:1
try
test("select", async () => {
render(<app />);
// get and click in the dropdown
const dropdownbutton = screen.getbyrole("button", { name: /dog name /i });
fireevent.click(dropdownbutton);
// wait for dropdown item and click it
const dropdownitem = await screen.findbytestid("name-item-2");
fireevent.click(dropdownitem);
});
there are some ms in between the click and the apearance on the screen of the element, so you have declare your function as async
and to await
for your element to appear (and use findby instead of getby in order to work as async).
you can read more about testing-library async methods here
score:1
first of all, for component interaction, prefer the use of userevent
instead fireevent
as testing-library
describes:
the built-in fireevent is a utility to easily dispatch events. it dispatches exactly the events you tell it to and just those - even if those exact events never had been dispatched in a real interaction in a browser.
user-event on the other hand dispatches the events like they would happen if a user interacted with the document. that might lead to the same events you previously dispatched per fireevent directly, but it also might catch bugs that make it impossible for a user to trigger said events. this is why you should use user-event to test interaction with your components.
you can check more about it here.
related to test not find option
role, it´s because the element take some milliseconds to appear on screen and because of that your test should be async
and you need to use await
and findby
query to succeed in the test:
import { render, screen, cleanup } from "@testing-library/react";
import userevent from "@testing-library/user-event";
test("select", async () => {
render(<app />);
const dropdownbutton = screen.getbyrole("button");
userevent.click(dropdownbutton);
const dropdownitem = await screen.findbyrole("option", { name: /ninica/i });
userevent.click(dropdownitem);
const typographyel = await screen.findbytext(/chosen name: ninica/i);
expect(typographyel).tobeinthedocument();
});
you can check more about async/await
and findby
query here.
you can also check the difference of queries here.
Source: stackoverflow.com
Related Query
- React Testing Library + Material UI DropDown
- React testing library on change for Material UI Select component
- How to test material ui autocomplete with react testing library
- How to test Material UI Select Component with React Testing Library
- Material UI select onChange doesn't work in react testing library
- Formik Material UI and react testing library
- How can I use React Testing Library to simulate clicking on Material UI RadioGroup option?
- Testing <Input/> component from Material UI using Testing React Library and the call back function is not recongnized in the onChange prop
- How to test material ui autocomplete google map with react testing library
- React Testing Library + Material UI (v4) Hidden component
- react testing library assert dropdown options are rendered in correct order
- How to test a className with the Jest and React testing library
- Checking text appears inside an element using react testing library
- React testing library - check the existence of empty div
- Testing Library React vs Jest
- Is it possible to use Material UI library with React Native?
- How to mock ResizeObserver to work in unit tests using react testing library
- React Testing Library gives console error for ReactDOM.render in React 18
- React testing library how to use waitFor
- React Testing Library - using 'await wait()' after fireEvent
- how to get code coverage in react with react testing library
- Testing click event in React Testing Library
- React Testing Library - Unable to find the element with data-testid
- fireEvent.keyDown not working as expected on my Jest + React Testing Library test
- React testing library - TypeError: expect(...).toHaveTextContent is not a function
- React Testing Library with TypeScript: Set an input's value
- React Native Testing Library doesn't find text even though its in debug
- Testing redirect after submit with React Testing Library
- Property 'value' does not exist on type 'HTMLElement' in React Testing Library
- ant design v4 breaks react testing library tests for Select and Autocomplete
More Query from same tag
- TypeScript Property 'selected' does not exist on type '{ id: string; value: string; label: string; color: string; }'.ts(2339)
- Getting Error when passing function to Child Component
- AXIOS Post stay on PENDING in my REACT application
- How can I set default sorter and filters on antd table components?
- mapping list to list[dict] using react
- how to increase input text box size in react-autocomplete?
- react hooks must be called in a react function - how do I change syntax to correct?
- how should I achieve the effect where when I click on a button, the page go blank for a second in React
- React Beginner Question: Textfield Losing Focus On Update
- React: Variable resets to default if another event function is run
- React reuse a component performing different get/post requests based on where used
- Why is a horizontal line created, when user inputs whitespace?
- router.query not updated after router.push in next/router
- Purpose of flexGrow in the parent div of a Material UI grid?
- Styled components onClick rotate element
- Warning: <elementType /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
- How to place an item conditionally to right or left of a container?
- I want to add 'show more' button for overflowed elements then only after clicking on shoe more, I want to show new line
- Displayed data does not update
- PSD.js in react error fs.readFileSync is not a function
- How to build image with webpack for React?
- Adding a <strong> Tag to the typed letters in Autocomplete field in React
- Store subscribe not working in external component
- Getting an error: "ReferenceError: window is not defined"
- Looking to run a function after fetch in ReachJS
- Redirect without locale in URL nextjs
- Does componentDidUpdate run after all children have been updated?
- React Bootstrap dropup menu partially visible in the datagrid
- With Chartjs Radar - how to modify the gray gridlines?
- Use Babel to transpile, import and export in the client, without Webpack?