getAllByRole witha regex matcher is returning the wrong count

[themagickoala]

• @testing-library/dom version: 8.11.3
• Testing Framework and version: Jest 26.6.3
• DOM Environment: jsdom 16.6.0

Relevant code or config:

import { getQueriesForElement } from '@testing-library/dom';

test('should use get all by role matcher', () => {
  const container = document.createElement('div');
  container.innerHTML = `<button
    type="button"
    title="Low">Low</button>
  <button
    type="button"
    title="Medium">Medium</button>
  <button
    type="button"
    title="High">High</button>`;
  const { getAllByRole } = getQueriesForElement(container);
  expect(getAllByRole('button', { name: /(low|medium|high)/gi }).length).toBe(3); // error - only found 2
});

What you did:

I was trying to match a set of elements using the getAllByRole matcher within React Testing Library, and the length of the matched results was coming back wrong.

What happened:

Instead of finding all 3 buttons, it only found 2 - the Low and High buttons

Reproduction:

The code above is a self-contained minimal reproduction of this issue within DOM Testing Library (we found this with RTL).

Problem description:

All 3 buttons should be found, rather than only finding 2.

Suggested solution:

I wasn't able to dig too far into the code for this. I imagine something is happening either in the filters for the queryAllByRole method, or within the matches method.

[themagickoala]

We've managed to resolve this locally by removing the global flag from the Regular Expression, but I don't understand why this would cause the test to fail?

[timdeschryver]

It seems like it somehow holds some state on a global RegExp, I don't know why this happens but here's what I found:

const g = /foo/g
g.test('foo') // |> true
g.test('foo') // |> false

const n = /foo/
n.test('foo') // |> true
n.test('foo') // |> true

g.test('bar') // |> false
g.test('bar') // |> false

TIL: A RegExp object with the g flag keeps track of the lastIndex where a match occurred, so on subsequent matches it will start from the last used index

Source: https://stackoverflow.com/a/1520853/10112124

[github-actions]

🎉 This issue has been resolved in version 8.11.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀