getByRole doesn't work for menu with aria-label

[sandrina-p]

• @testing-library/dom version: 4.1.0
• Testing Framework and version: Jest (The same as in the codesandbox below)

Relevant code or config:

    <ul role="menu" aria-label="actions">
      <li role="menuitem">copy</li>
      <li role="menuitem">paste</li>
      <li role="menuitem">cut</li>
    </ul>
    
    <ul role="menu" aria-label="share">
      <li role="menuitem">copy link</li>
      <li role="menuitem">report bug</li>
    </ul>

What you did:

screen.getByRole('menu', { name: 'actions' }) 

What happened:

The element was not found.

Unable to find an accessible element with the role "menu" and name "actions"

I was expecting to be found because, according to the Chrome's Accessibility Tree, the role and name are set correctly:

Reproduction:

• Condesabox: https://codesandbox.io/s/react-testing-library-menu-name-6ir07
• Testing Playground: https://testing-playground.com/gist/ba36265b023b1e0bb5dbe513cceb84f1/d07dc90240b88c2c71ad7c1478a7e40ba800778d

References:

This was originally discovered at Discord KCD by Thomas.

[eps1lon]

Thanks for the report

Does this also reproduce locally? It can't even find the menu role which is probably a duplicate of #1032 i.e. an issue with the testing environment of Codesandbox (codesandbox/codesandbox-client#5887).

[MatanBobi]

@eps1lon I checked now and this passed in local env for me.

[thomasmery]

hi there,

I am trying to reproduce this locally and my test fails whenever I try to access a menu by role & name

import React from 'react';
import { render, screen } from '@testing-library/react';

const Component = () => (
  <>
    <ul role="menu" aria-label="actions">
      <li role="menuitem">copy</li>
      <li role="menuitem">paste</li>
      <li role="menuitem">cut</li>
    </ul>

    <ul role="menu" aria-label="share">
      <li role="menuitem">copy link</li>
      <li role="menuitem">report bug</li>
    </ul>
  </>
);

test('getByRoleMenu', () => {
  render(<Component />);
  expect(screen.getByRole('menu', { name: 'actions' })).toBeInTheDocument();
  expect(screen.getByRole('menu', { name: 'share' })).toBeInTheDocument();
});

am I doing something wrong?

@MatanBobi would you share the code of your test?

thanks

[eps1lon]

@thomasmery Could you post the result of npx testing-library-envinfo react? You might have an older version of dom-accessibility-api that was fixed in #1059

[thomasmery]

here it is

System:
    OS: macOS 11.6
  Binaries:
    Node: 14.1.0 - ~/.nvm/versions/node/v14.1.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.1.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.1.0/bin/npm
  npmPackages:
    @testing-library/cypress: ^7.0.6 => 7.0.6 
    @testing-library/dom: ^7.21.4 => 7.31.2 
    @testing-library/jest-dom: ^5.11.10 => 5.13.0 
    @testing-library/react: ^11.2.6 => 11.2.7 
    @testing-library/user-event: ^12.0.11 => 12.8.3 
    aria-query:  4.2.2 
    dom-accessibility-api:  0.5.6 
    jest:  26.6.0 
    jsdom:  16.6.0 
    react: ^17.0.1 => 17.0.2 
    react-dom: ^17.0.1 => 17.0.2 

[MatanBobi]

@thomasmery The fix for role="menu" that @eps1lon mentioned was introduced in dom-accessibility-api version 0.5.9. You'll need to upgrade @testing-library/dom to version ^8.10.1 to get it :)

[thomasmery]

thanks!

test is passing now

I had to upgrade to:

   @testing-library/dom: ^8.11.1 => 8.11.1 
   @testing-library/jest-dom: ^5.16.1 => 5.16.1 
   @testing-library/react: ^12.1.2 => 12.1.2
   dom-accessibility-api: ^0.5.10 => 0.5.10