Tests fail on CI #270

wtchnm · 2021-12-22T13:52:01Z

Describe the bug

Hi! My tests are working fine locally but are failing on CI. Here are the GitHub Actions logs:

> vitest run --coverage


 RUN  /home/runner/work/Vitamin/Vitamin

 √ utils.ts > useMediaQuery > renders
 √ Fruit.tsx > <Fruit /> > renders
 √ Fruit.tsx > <Fruit /> > redirect to fruit details page on enter
 √ Fruit.tsx > <Fruit /> > redirect to photographer profile page on image attribute link click
 √ App.tsx > <App /> > renders
 √ Details.tsx > <Details /> > redirect to home screen if fruit is not found
 × LoadingOrError.tsx > <LoadingOrError /> > renders
   → Unable to find an element with the text: Loading.... 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 />

Ignored nodes: comments, <script />, <style />
<body />
 × Details.tsx > <Details /> > renders
   → Unable to find role="link"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 × Gallery.tsx > <Gallery /> > renders
   → Unable to find role="img"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 × LoadingOrError.tsx > <LoadingOrError /> > renders with an error message
   → Unable to find an element with the text: Failed to fetch. 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 />

Ignored nodes: comments, <script />, <style />
<body />
 × Details.tsx > <Details /> > renders with mobile resolution
   → Unable to find role="img"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 × Gallery.tsx > <Gallery /> > renders with mobile resolution
   → Unable to find role="img"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />

 Failed Tests 6 

 FAIL  LoadingOrError.tsx > <LoadingOrError /> > renders
Error: Unable to find an element with the text: Loading.... 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 />

Ignored nodes: comments, <script />, <style />
<body />
 ❯ waitForWrapper node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1276:25
    1274|   // create the error here so its stack trace is as close to the
    1275|   // calling code as possible
    1276|   var stackTraceError = new Error('STACK_TRACE_MESSAGE');
       |                         ^
    1277|   return getConfig().asyncWrapper(function () {
    1278|     return waitFor(callback, _extends({
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1373:12
 ❯ src/components/__tests__/LoadingOrError.tsx:8:22

⎯⎯⎯⎯[1/6]⎯

 FAIL  LoadingOrError.tsx > <LoadingOrError /> > renders with an error message
Error: Unable to find an element with the text: Failed to fetch. 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 />

Ignored nodes: comments, <script />, <style />
<body />
 ❯ waitForWrapper node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1276:25
    1274|   // create the error here so its stack trace is as close to the
    1275|   // calling code as possible
    1276|   var stackTraceError = new Error('STACK_TRACE_MESSAGE');
       |                         ^
    1277|   return getConfig().asyncWrapper(function () {
    1278|     return waitFor(callback, _extends({
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1373:12
⎯⎯⎯⎯[2/6]⎯
 ❯ src/components/__tests__/LoadingOrError.tsx:13:22


 FAIL  Details.tsx > <Details /> > renders
Error: Unable to find role="link"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 ❯ waitForWrapper node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1276:25
    1274|   // create the error here so its stack trace is as close to the
    1275|   // calling code as possible
    1276|   var stackTraceError = new Error('STACK_TRACE_MESSAGE');
       |                         ^
    1277|   return getConfig().asyncWrapper(function () {
    1278|     return waitFor(callback, _extends({
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1373:12
 ❯ src/pages/__tests__/Details.tsx:26:16

⎯⎯⎯⎯[3/6]⎯

 FAIL  Details.tsx > <Details /> > renders with mobile resolution
Error: Unable to find role="img"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 ❯ waitForWrapper node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1276:25
    1274|   // create the error here so its stack trace is as close to the
    1275|   // calling code as possible
    1276|   var stackTraceError = new Error('STACK_TRACE_MESSAGE');
       |                         ^
    1277|   return getConfig().asyncWrapper(function () {
    1278|     return waitFor(callback, _extends({
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1373:12
 ❯ src/pages/__tests__/Details.tsx:45:29

⎯⎯⎯⎯[4/6]⎯

 FAIL  Gallery.tsx > <Gallery /> > renders
Error: Unable to find role="img"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 ❯ waitForWrapper node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1276:25
    1274|   // create the error here so its stack trace is as close to the
    1275|   // calling code as possible
    1276|   var stackTraceError = new Error('STACK_TRACE_MESSAGE');
       |                         ^
    1277|   return getConfig().asyncWrapper(function () {
    1278|     return waitFor(callback, _extends({
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1373:12
⎯⎯⎯⎯[5/6]⎯
 ❯ src/pages/__tests__/Gallery.tsx:16:22


 FAIL  Gallery.tsx > <Gallery /> > renders with mobile resolution
Error: Unable to find role="img"

Ignored nodes: comments, <script />, <style />
<body />

Ignored nodes: comments, <script />, <style />
<body />
 ❯ waitForWrapper node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1276:25
    1274|   // create the error here so its stack trace is as close to the
    1275|   // calling code as possible
    1276|   var stackTraceError = new Error('STACK_TRACE_MESSAGE');
       |                         ^
    1277|   return getConfig().asyncWrapper(function () {
    1278|     return waitFor(callback, _extends({
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1373:12
⎯⎯⎯⎯[6/6]⎯
 ❯ src/pages/__tests__/Gallery.tsx:26:22


Test Files  3 failed | 3 passed (6)
     Tests  6 failed | 6 passed (12)
      Time  9.14s (in thread 7.34s, 124.52%)

It looks like the DOM is not being rendered in some tests. Maybe I have to wait some time before making the assertions?

Reproduction

Repo: https://github.com/wtchnm/Vitamin/tree/feat/vitest
Action: https://github.com/wtchnm/Vitamin/runs/4607533559?check_suite_focus=true

System Info

System:
    OS: Linux 5.15 undefined
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 5.02 GB / 15.60 GB
    Container: Yes
    Shell: 3.3.1 - /usr/bin/fish
  Binaries:
    Node: 16.13.1 - /usr/bin/node
    Yarn: 1.22.15 - ~/.npm-global/bin/yarn
    npm: 8.3.0 - /usr/bin/npm
  Browsers:
    Brave Browser: 96.1.33.106
    Firefox: 95.0.2
  npmPackages:
    @vitejs/plugin-react: 1.1.3 => 1.1.3 
    vite: 2.7.6 => 2.7.6 
    vitest: 0.0.107 => 0.0.107

Used Package Manager

pnpm

Logs

No response

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:

wtchnm · 2021-12-22T13:56:06Z

I get the same errors locally if I disable tinypool. Interesting.

wtchnm · 2021-12-24T11:17:09Z

It's fixed, thanks!

vjee · 2022-04-28T08:47:26Z

@wtchnm Hi, what did you do to solve this issue?
I'm running into the same thing. Most of the times CI passes but sometimes I get the same errors as you did.

wtchnm · 2022-04-28T11:51:10Z

Hi @vjee! I just updated vitest. I think it has something to do with concurrency as at that time I got the same errors locally disabling tinypool.

vjee · 2022-04-28T12:10:41Z

@wtchnm When I run vitest with --no-threads locally, I can reproduce the issue too. But unfortunately I'm already on the latest version :).

Thanks for the repy. It looks like I have some more debugging to do.

wtchnm closed this as completed Dec 24, 2021

vjee mentioned this issue Apr 28, 2022

Failing tests: --no-threads + @testing-library/react #1207

Closed

6 tasks

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tests fail on CI #270

Tests fail on CI #270

wtchnm commented Dec 22, 2021

wtchnm commented Dec 22, 2021

wtchnm commented Dec 24, 2021

vjee commented Apr 28, 2022

wtchnm commented Apr 28, 2022

vjee commented Apr 28, 2022

Tests fail on CI #270

Tests fail on CI #270

Comments

wtchnm commented Dec 22, 2021

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

wtchnm commented Dec 22, 2021

wtchnm commented Dec 24, 2021

vjee commented Apr 28, 2022

wtchnm commented Apr 28, 2022

vjee commented Apr 28, 2022