score:26
there are multiple mistakes in your test.
- passing component type instead of component instance to
render
basedom = render(cardcomponent); // this is wrong, passing component type
basedom = render(<cardcomponent />); // this is right, passing component instance created with jsx
using
mousemove
instead ofmouseover
eventsearching element by title and passing text instead of searching by text
basedom.getbytitle("disconnected (try again)"); // wrong, because, the prop on the tooltip is called 'title' but it is actually text as 'getbytitle' looks for html title attribute
basedom.getbytext("disconnected (try again)"); // right, because you are actually looking for text not html title attribute (but wrong see (4))
- using sync method for tooltip search instead of async
basedom.getbytext("disconnected (try again)"); // wrong, because, tooltip is added dynamically to the dom
await basedom.findbytext("disconnected (try again)"); // right
to sum up, with all mistakes fixed the test should look like this:
import react from "react";
import { render, fireevent } from "@testing-library/react";
import app from "./app";
test("show error title in tooltip", async () => {
const basedom = render(<cardcomponent />);
fireevent.mouseover(basedom.getbytestid("connection-sign"));
expect(
await basedom.findbytext("disconnected (try again)")
).tobeinthedocument();
});
score:1
i found this to be the most up to date way. you've got to do async() on the test and then await a findbyrole since it isn't instantaneous!
render(<logobar />);
fireevent.mouseenter(screen.getbylabeltext('dalabel'));
await screen.findbyrole(/tooltip/);
expect(screen.getbyrole(/tooltip/)).tobeinthedocument();
score:2
i was tried many ways but didn't work, therefore i tried mouse enter instead of mouseover or mousemove and it's worked for me. here is a solution to test tooltip content, like as:
import { render, cleanup, waitfor, fireevent, screen } from '@testing-library/react';
// timeline component should render correctly with tool-tip
test('renders timeline component with mouse over(tool-tip)', async () => {
const { getbytestid, getbytext, getbyrole } = render(
<timeline
items={timelineitems()}
currentitem={currenttimelineitem()}
ontimelineitemchange={() => {}}
/>
);
const coursetitle = "course collection-3";
fireevent.mouseenter(getbyrole('button'));
await waitfor(() => getbytext(coursetitle));
expect(screen.getbytext(coursetitle)).tobeinthedocument();
});
score:4
in addition to the accepted answer, it's important to make sure if you set the prop getpopupcontainer
for an antd
tooltip, the popup might not be visible to react testing library as it happened in my case since the dom container set may not be available in the body when testing the component especially if it's a unit test. e.g
in my case i had
<popover
getpopupcontainer={() => document.getelementbyid('post--component-drawer')}
content={<h1>hello world</h1>}>
<span data-testid="symbol-input--color-input">click me</span>
</popover>
div post--component-drawer
was not available for that unit test. so i had to mock popover
to make sure i override prop getpopupcontainer
to null so that the popup would be visible
so at the beginning of my test file, i mocked popover
jest.mock('antd', () => {
const antd = jest.requireactual('antd');
/** we need to mock popover in order to override getpopupcontainer to null. getpopcontainer
* sets the dom container and if this prop is set, the popup div may not be available in the body
*/
const popover = (props) => {
return <antd.popover {...props} getpopupcontainer={null} />;
};
return {
__esmodule: true,
...antd,
popover,
};
});
test('popver works', async () => {
render(<mycomponent/>);
fireevent.mouseover(screen.getbytestid('symbol-input--color-input'));
await waitfor(() => {
expect(screen.getbyrole('heading', {level: 1})).tobeinthedocument();
});
});
Source: stackoverflow.com
Related Query
- How to test for tooltip title in jest and testing/library
- How to test a className with the Jest and React testing library
- How to test redux state update with react testing library and jest
- How to properly test React Native Modals using Jest and Native Testing Library
- how to test Routes in react using jest and react testing library
- how to test button that call submit form using jest and react testing library
- Create unit test with Jest and React testing library for helper which generate a domain url
- How to Test React's Error Boundary using Jest and React Testing Library
- How to write a test with Jest and React testing library to check if anchor-tag <a /> exist
- How to test conditionally rendered string using React testing library and jest
- how to test component while passing boolean value with react testing library and jest
- How do you test for the non-existence of an element using jest and react-testing-library?
- How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?
- React, Jest and Material-UI: How to test for content rendered in a modal or popover
- Jest and React Testing Library, how to test if an element is hidden?
- how can I test if useState hook has been called with jest and react testing library?
- How to write test cases for tabs in material-ui using react testing library
- How to implement Jest test for Axios and Hooks - useEffect
- How to do meta tag and title unit test in React for react-helmet?
- How to test axios api using jest and react testing library?
- How to test onChange for ui-material TextField using Jest and Enzyme
- How to create a test for a screen that uses the same hook several times? React Testing Library
- Access and modify react context from jest test with react testing library
- unit test custom hook with jest and react testing library
- How do you test for the non-existence of anchor element using jest and react-testing-library?
- How do I configure .babelrc for react and jest testing framework?
- Unit testing react redux thunk dispatches with jest and react testing library for "v: 16.13.1",
- How to test a required input field with React Testing Library and Jest?
- How to write test cases for a function using jest and enzyme
- How to write a test case for a simple React component using Jest and Enzyme
More Query from same tag
- How can I hide a div with if else render react?
- React state not working on drop down menu to hide it again
- Generated id in React returning error when using react-portal-toolip
- ApolloConsumer and cache
- React hooks: accessing up-to-date state from within a callback
- Why do we use <div>#root instead of <body>?
- React-Contextmenu - console.log() doesn't work
- Jest: Testing API Methods from Intercom
- Default props in theme configuration seems not to work
- ReactJS Add in Component based on a number user inputs
- How to share one api call to different resource names in React Admin
- How to call action in button click of component, Even though i'm using connect function which is not calling in React Redux
- how to update a query props.data after a query onClick
- Hover Effect in React is too slow (state update for hover effects)
- How to store data in localStorage in reactjs
- How to add a new line in text field of dropdown in semantic-ui react?
- How to import bootstrap and fontasome in index.html reactjs app
- How to alert when Session (JWT) has expired in React/Redux
- React jest test with enzyme error
- How to alias a Material-UI import?
- How To Make A Post Request Using Redux Thunk With Redux Toolkit
- "Yup" Validation Library fails to compile in TypeScript
- React data loading the previous state than what it is supposed to
- use react component instead of motion's elements in Framer motion
- Looking to pass all props using react hooks
- TypeError: _fire__WEBPACK_IMPORTED_MODULE_11__.default.collection is not a function
- React doesn't update the view after login
- How to stub async action in componentDidMount for react redux connected component test using Jest
- Javascript / webpack : how to concatenate all json files in directory with a custom loop over files
- How to control material UI Accordian expansion / collapse by click on icon from another component?