testing-library / testing-library/dom-testing-library

`getByRole` fails when running under `vitest` with `--no-isolate --no-file-parallelism`

Open

#1,337 opened on Oct 10, 2024 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language: JavaScript
Stars: 3.3k
Forks: 474
PR merge metrics: No merged PRs in 30d

Description

@testing-library/dom version: 10.4.0
Testing Framework and version: vitest 2.1.2
DOM Environment: jsdom 25.0.1

Relevant code or config:

Have two files with following content

// ./foo.test.ts
import { screen } from '@testing-library/dom';

describe('foo suite', () => {
  it('foo', async () => {
    console.log('foo');
    const button = document.createElement('button');
    document.body.appendChild(button);
    try {
      screen.debug();
      screen.getByRole('button');
    } finally {
      button.remove();
    }
  });
});

// ./bar.test.ts
import { screen } from '@testing-library/dom';

describe('bar suite', () => {
  it('bar', async () => {
    console.log('bar');
    const button = document.createElement('button');
    document.body.appendChild(button);
    try {
      screen.debug();
      screen.getByRole('button');
    } finally {
      button.remove();
    }
  });
});

What you did:

Run pnpm test run => works
Run pnpm test run -- --no-isolate --no-file-parallelism => one of the tests fail.

What happened:

One of the tests fails, it can't seem to locate the button, yet it's there when calling screen.debug()

bar
<body>
  <button />
</body>

/home/projects/vitest-dev-vitest-u1eg7t/test/suite.test.tsx:10:14
   8 |     document.body.appendChild(button);
   9 |     try {
> 10 |       screen.debug();
     |              ^


stdout | test/basic.test.tsx > foo suite > foo
foo
<body>
  <button />
</body>

/home/projects/vitest-dev-vitest-u1eg7t/test/basic.test.tsx:10:14
   8 |     document.body.appendChild(button);
   9 |     try {
> 10 |       screen.debug();
     |              ^


 ❯ test/basic.test.tsx (1)
   ❯ foo suite (1)
     × foo
 ✓ test/suite.test.tsx (1)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  test/basic.test.tsx > foo suite > foo
TestingLibraryElementError: Unable to find an accessible element with the role "button"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

Ignored nodes: comments, script, style

Reproduction:

Stackblitz with reproduction: https://stackblitz.com/edit/vitest-dev-vitest-9xcyxz?file=test%2Fbar.test.ts

You can run pnpm test run and pnpm test run -- --no-isolate --no-file-parallelism to see the bug in action.

Problem description:

Migrating from mocha to vitest, trying to reach similar performance by disabling isolation

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Research direction

Run the StackBlitz reproduction with pnpm test run and with pnpm test run -- --no-isolate --no-file-parallelism, starting from test/basic.test.tsx and test/suite.test.tsx. Compare screen.debug() with screen.getByRole('button') in both modes and trace the DOM Testing Library query behavior. Done means both tests consistently find the button under the reported Vitest options, with a regression test covering the case.

Written by the indexing model from the issue text.

Assessment

Tech stack: javascript
Domain: testing-qa
Issue type: Bug
Difficulty: 4/5
Estimated time: 3-5 days
Activity status: Stale
Clarity: Mostly clear
Newbie friendliness: 35/100