Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Janpot opened this issue Oct 10, 2024 · 4 comments

Comments

@Janpot
Copy link

Janpot commented Oct 10, 2024

  • @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

Suggested solution:

@Janpot

This comment was marked as off-topic.

@Janpot Janpot closed this as completed Oct 10, 2024
@Janpot
Copy link
Author

Janpot commented Oct 20, 2024

Reopening after updating the reproduction

@Janpot Janpot reopened this Oct 20, 2024
@MatanBobi
Copy link
Member

MatanBobi commented Oct 22, 2024

Hi @Janpot, thanks for opening this.
I'm not sure there's anything we can do here.
This isn't tightly related to testing library as the --no-isolate flag clearly states that this option is usually good to use in node environment but the environment you're using here is JSDOM that means that you must have a clear DOM before every run starts.

vitest docs stating node environment is ok for --no-isolate

Also, the reproduction actually passed for me:
image
Which only states that this flakiness is related to the isolation issue.

I honestly don't think there's an issue with testing library here or anything we can do to make this work better for your use case.
I'm closing this as not planned, if you disagree, please feel free to comment and re-open.

@MatanBobi MatanBobi closed this as not planned Won't fix, can't repro, duplicate, stale Oct 22, 2024
Copy link

Uh oh! @MatanBobi, the image you shared is missing helpful alt text. Check #1337 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants