Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tests fail on CI

See original GitHub issue

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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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/@testing-library+dom@8.11.1/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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
vjeecommented, Apr 28, 2022

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

0reactions
wtchnmcommented, Apr 28, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fixing Tests in CI/CD: Why are Your Tests Failing?
Taking failing tests seriously is important. Tests are meant to help. Even so, most information about running tests is based on opinion.
Read more >
CICD - How To Resolve Failing Tests - Undo.io
Test failures are captured as a recording and stored as Jenkins artifacts. The recording captures the software failure, and provides all of the...
Read more >
Troubleshooting Continuous Integration, or How to Debug ...
Troubleshooting Continuous Integration, or How to Debug Tests That Fail on CI, but Pass Locally · Don't Relaunch the CI Build · Rebase...
Read more >
Debugging Failing Tests and Test Pipelines - GitLab
These guidelines are intended to help you to investigate end-to-end test pipeline failures so that they can be properly addressed. This will involve...
Read more >
Why Do My Tests Pass Locally but Fail on CircleCI?
Different language versions. Ensure you are using the same language version on your machine and on CircleCI. · Different package versions.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Expose CanvasRenderingContext2D via the `canvas` package

Next page

Run only the test with the given name with `-t` and `--testNamePattern`