score:1

Accepted answer

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 } )


Related Query

More Query from same tag