score:1
it seems like mui applies the tooltip to whatever the child of the <tooltip/>
is, in my case it was the <svg/>
generated by <infoicon/>
. if you wrap the <infoicon/>
in a <span>
tag the tooltip title
will then be applied to the <span/>
, making it possible to explicitly look for the tooltip text.
my ui
<div
data-testid="tooltip-icon"
classname={classes.infotooltipicon}
>
<tooltip
data-testid="tooltip-text"
title="tooltip text"
>
<span>
<infoicon/>
</span>
</tooltip>
</div>
my test
it('has a tooltip on the info icon', () => {
render(<component />);
const infoicon = screen.getbytestid('tooltip-icon');
userevent.hover(infoicon);
const infotooltip = screen.getbytestid('tooltip-text')
expect(infotooltip.title).toequal('tooltip text);
});
this way if i have multiple tooltips i can ensure i'm grabbing the exact one i want via test id.
score:0
the better solution is that you should just use the infoicon
with titleaccess
props. https://material-ui.com/api/svg-icon
<infoicon titleaccess="tooltip text" />
after that, you could test the component like this as an example.
expect(
getbyrole('tooltip', { hidden: true, name: 'tooltip text' }),
).tobeinthedocument();
score:0
your suggestion with the span is good! if you don't want to add a span, then i think you just need to adjust the query to look for aria-hidden elements.(since the svg has aria-hidden=true
it gets excluded from the accessibility tree). the query would look like:
const tooltip = screen.getbytitle("tooltip text", { hidden: true } )
Source: stackoverflow.com
Related Query
- React testing library element title undefined
- Checking text appears inside an element using react testing library
- React Testing Library - Unable to find the element with data-testid
- Attempts to check for element not existing with React Testing Library always failing
- React testing library and styled components - cannot read properties of undefined
- React testing library failed because of window undefined
- React Testing Library render import fails with TypeError: Cannot read properties of undefined (reading 'length')
- React / Next - importing component from external library cause : Element type is invalid: expected a string or a class/function but got: undefined
- Not able to click list child element from side menu using react testing library
- Find next DOM element with React testing library
- React testing library getting element
- React testing library - cannot read property 'prototype' of undefined while mocking named class component import
- How to test a className with the Jest and React testing library
- React testing library on change for Material UI Select component
- React testing library - check the existence of empty div
- Testing Library React vs Jest
- How to test material ui autocomplete with react testing library
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- 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
- 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
- How to test Material UI Select Component with React Testing Library
- React Native Testing Library doesn't find text even though its in debug
- Testing redirect after submit with React Testing Library
More Query from same tag
- Target another styled component when input:invalid
- React useCallback hook is not working as expected
- React-Router-Redux: export 'syncHistoryWithStore' was not found in 'react-router-redux'
- Store component in an object in react
- Context API HOC Unit testing
- Include JointJS diagram in React/Flux projects
- Serving static files in Electron (React app)
- How to save the result of my API call to my redux store, and call my API when my component firsts loads?
- Can React.createRef() be created dynamically from an array of state objects?
- How the update/change the value of object in array in react js?
- Functions in App.js not showing up in .jsx file
- Typescript: Pass component given props to the component's children prop
- React Profiler: What do the timings mean?
- I want to display a Snack Bar in React
- How i can make a sorted table using react-semantic-ui and functional component?
- Create a new array dynamically whenever there is a number in Input Array JavaScript
- 304 and no json response on deployed app on Heroku
- How can you access the constant variables of one Component in another Component - React
- React render from a loop
- How do you make a button show a + (plus sign) when not clicked, and - (minus sign) when clicked?
- Stale items displayed in component
- Using map() to iterate through a nested Prop in React
- JS Date creating incorrect dates/JS Date confusion
- How do I change the dropdown icon in material-ui select field?
- functional component is not re-rendering after state change in React
- responsive html and css code with any devices
- Does the componentDidMount useEffect hook run when comming back from another react-link from the same project?
- Error in App class when using React-Redux "connect "
- Redux page breaks in Android WebView in Kitkat
- How to change useState's state without re-rendering the component, but just its components