Render stops working when running multiple test suites #1251

zrev2220 · 2022-05-06T16:36:14Z

Describe the bug

I have a project with multiple test suites, each of which call render and other @testing-library/react things to test React components. When running all test suites, the first one will succeed, while the others will fail when doing something along the lines of screen.getByText, failing with a TestingLibraryElementError. Here's example error output:

 FAIL  src/components/DarkMode.test.tsx > displays current dark mode > dark
TestingLibraryElementError: Unable to find an element with the text: /dark/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.    

Ignored nodes: comments, <script />, <style />
<body />
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:38:19
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:90:38
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:62:17
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:111:19
 ❯ src/components/DarkMode.test.tsx:43:18
     41|     renderWithContext(<DarkMode />);
     42|     screen.debug();
     43|     expect(screen.getByText(/dark/)).toBeInTheDocument();
       |                  ^
     44|     expect(screen.queryByText(/light/)).toBeNull();
     45|   });

You can see in this output that the document is only <body />, hence why the requested element isn't found.

Interestingly (frustratingly?), if I add screen.debug() statements prior to this assertion, the document tree contains all the expected elements. 😕 So for some reason screen.getByText isn't using the same tree as screen.debug prints.

Reproduction

See https://github.com/zrev2220/vitest-render-bug.

Tests fail when running npm test (or npm run test), but succeed when run individually via npm run test -- Counter and npm run test -- DarkMode.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 2.21 GB / 15.85 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.32)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.2
    vite: ^2.9.7 => 2.9.8
    vitest: ^0.10.5 => 0.10.5

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

zrev2220 · 2022-05-06T18:16:39Z

From further investigation, I realized this problem seems to only occur with threads: false in vite.config.ts—if this line is removed/set to true, the tests pass when run together. ✔️

So to make things work for me, I'll remove threads: false, but the behavior I described still seems undesirable, so I'll leave the issue open.

Now that I know threads: false is involved, this issue probably relates to (and may be duplicated by one or more):

sheremet-va · 2022-05-08T14:51:31Z

We released a fix in 0.12.0. @zrev2220 Can you confirm it is working now?

zrev2220 · 2022-05-08T18:39:36Z

We released a fix in 0.12.0. @zrev2220 Can you confirm it is working now?

@sheremet-va The issue where the body is empty is gone 👍, but now I'm getting errors involving "Found multiple elements" 😦; see below.

 FAIL  src/components/DarkMode.test.tsx > toggles dark mode
TestingLibraryElementError: Found multiple elements with the text: /light/

Here are the matching elements:

Ignored nodes: comments, <script />, <style />
<div>
  🔆 It's light
</div>

Ignored nodes: comments, <script />, <style />
<div>
  🔆 It's light
</div>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, <script />, <style />
<body>
  <div>
    <div>
      <div>
        🔆 It's light
      </div>
      <button>
        Toggle
      </button>
    </div>
  </div>
  <div>
    <div>
      <div>
        🌙 It's dark
      </div>
      <button>
        Toggle
      </button>
    </div>
  </div>
  <div>
    <div>
      <div>
        🔆 It's light
      </div>
      <button>
        Toggle
      </button>
    </div>
  </div>
</body>
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:38:19
 ❯ getElementError node_modules/@testing-library/dom/dist/query-helpers.js:25:35
 ❯ getMultipleElementsFoundError node_modules/@testing-library/dom/dist/query-helpers.js:29:10
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:66:13
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:111:19
 ❯ src/components/DarkMode.test.tsx:49:16
     47|   const user = userEvent.setup();
     48|   renderWithContext(<DarkMode />);
     49|   expect(screen.getByText(/light/)).toBeInTheDocument();
       |                ^
     50|   expect(screen.queryByText(/dark/)).toBeNull();
     51|

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯

See 33d42d75 on the vitest-0.12.0 branch in my reproduction repo to reproduce this yourself.

However, I fixed this by adding a call to @testing-library/react's cleanup function afterEach test. (This is supposed to happen automatically if globals are registered, but I guess threads: false interferes with that). See 2e266a45 for that change.

Given this fact, I guess this issue can probably be closed, though the non-auto cleanup is a bit worrisome (but probably deserves a separate issue).

sheremet-va · 2022-05-08T18:48:49Z

Given this fact, I guess this issue can probably be closed, though the non-auto cleanup is a bit worrisome (but probably deserves a separate issue).

I suspect it is referencing another cjs/esm entry point, although not sure. Deserves another open issue. I think cleanup function is not called for other frameworks too.

zrev2220 · 2022-06-04T19:55:10Z

@sheremet-va Just now got around to it, but I opened #1430 for the non-auto cleanup issue.

sheremet-va closed this as completed May 8, 2022

github-actions bot locked and limited conversation to collaborators Jun 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render stops working when running multiple test suites #1251

Render stops working when running multiple test suites #1251

zrev2220 commented May 6, 2022

zrev2220 commented May 6, 2022

sheremet-va commented May 8, 2022 •

edited

Loading

zrev2220 commented May 8, 2022

sheremet-va commented May 8, 2022

zrev2220 commented Jun 4, 2022

Render stops working when running multiple test suites #1251

Render stops working when running multiple test suites #1251

Comments

zrev2220 commented May 6, 2022

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

zrev2220 commented May 6, 2022

sheremet-va commented May 8, 2022 • edited Loading

zrev2220 commented May 8, 2022

sheremet-va commented May 8, 2022

zrev2220 commented Jun 4, 2022

sheremet-va commented May 8, 2022 •

edited

Loading