"Your tests are loading..." shown but no component tests are run #23903

JonRossway · 2022-09-20T19:34:12Z

Current behavior

I am trying to run a single spec file (any spec file fails to run) and am stuck with "Your tests are loading..." after upgrading to the latest Cypress from v9.6

Desired behavior

Cypress should run the component test

Test code to reproduce

cypress-io/cypress-test-tiny@master...JonRossway:cypress-test-tiny:master

Cypress Version

v10.8.0

Node version

v14.20.0

Operating System

macOS v12.6

Debug Logs

Debug logs don't provide any additional context

Other

No response

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

ZachJW34 · 2022-09-21T20:48:33Z

@JonRossway I was able to reproduce your issue and I was able to fix it by removing the commented code from your cypress/support/component-index.html. The reason is that html-webpack-plugin searches for a <head> element to inject the scripts into, but it's finding the commented head element and injecting the scripts there. You then end up sending an index.html that doesn't do anything since the scripts that need to be run are contained within the commented code.

This is the result when leaving the comments in there if you're curious, you'll notice the <script defer ...> is injected in the wrong place

<!-- <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="lib/vendor/materialize.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Components App</title>
  <script defer src="/__cypress/src/main.js"></script></head>
  <body class="light materialize striim">
    <div data-cy-root id="app"></div>
    <div id="react-content"></div>
  </body>
</html> -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Components App</title>
  </head>
  <body>
    <div data-cy-root></div>
  </body>
</html>

JonRossway · 2022-09-22T16:48:51Z

That worked! Thank you so much for your help, @ZachJW34 !!

ZachJW34 · 2022-09-22T20:17:56Z

Glad I could help!

SantiagoBotero-KSO · 2023-02-09T21:38:59Z

getting same issue, but in my case I can not fixed with that workaround

Branchverse · 2023-03-08T15:50:39Z

getting the same issue, but in my case, I can not fix with that workaround

dmoyadev · 2023-03-30T08:50:54Z

I'm also facing the same problem. I have everything updated to the last version and it still does not execute any test.

victoria-ov · 2023-04-04T07:23:34Z

Good day

I am experiencing the same issue, if there is any advise or pointers, that would be great.

We have an existing project that has E2E tests with Cypress and we want to get started with component testing (the project uses React18.1.0 and Vite4.0.4). I followed the guide and did the configuration for component testing. But cannot get past the "Your tests are loading" even when using example code with the stepper.

We previously ran Cypress 12.4, but I upgraded it now to Cypress 12.9.0 as I though that might be the issue.

Here is my config file (cypress.config.cjs) and also the component.js (what is strange here is that the mount is indicated as an error). Lastly the, component-index.html.

Any help would be great. Thank you!

astone123 · 2023-04-04T19:47:16Z

@victoria-ov Are you able to run your component tests in run mode with npx cypress run --component? Also, could you provide debug logs from Cypress when you run into this issue? Thanks

jordanpowell88 · 2023-04-17T18:27:21Z

@victoria-ov is this still an issue?

victoria-ov · 2023-04-18T13:25:08Z

Hi, sorry, work priorities shifted and only responding now.

So the component test runner opens, but the test only loads. Attached is the network tab and also the error log. Any advise or guidance would be great.

error.txt

matt-cratebind · 2023-04-19T19:46:33Z

I was running into this same issue, and for me it was due to an issue in my vite.config.ts. There were no console or command line errors that helped point me in that direction, so I'd strongly recommend adding an error somewhere.

In my specific case, I'm using a Vite plugin that allows it to work with Rails, so removing that fixed my issue. But I imagine if any of these plugins don't work in the Cypress environment, it would cause this error.

Maxine-Chui · 2023-04-20T22:16:24Z

I'm having the same issue as @victoria-ov. Any tips would be greatly appreciated!

In the network tab, the test file gets stuck in pending status. http://localhost:4500/__cypress/iframes//Users/<me>/<path/to/repo>/cypress/component/MessagesWidget.cy.tsx

Error log in terminal - could this be iframe related?

In my cypress.config.ts I have

component: {
    devServer: {
      framework: "react",
      bundler: "vite",
    },
  },

My component-index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Components App</title>
  </head>
  <body>
    <div data-cy-root></div>
  </body>
</html>

jordanpowell88 · 2023-04-24T17:43:40Z

@Maxine-Chui Are you able to provide an actual example repo? If I create a new react vite project I'm not getting this issue you are describing.

Also if you could check to see if removing any additional plugins like @matt-cratebind fixes the issue?

victoria-ov · 2023-05-02T05:54:24Z

My colleague was able to find the solution. He added the following vite configurations to the cypress.config.cjs file. This solved our issue.

const react = require('@vitejs/plugin-react');

module.exports = defineConfig({

  e2e: {
    experimentalStudio: true,
  },

  viewportHeight: 768,
  viewportWidth: 1366,

  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
      viteConfig: {
        plugins: [react()],
        server: {
          port: 3000,
        },
      }
    },
  },
});

Thank you for taking time to assist.

cameronscottseequent · 2023-05-03T23:49:17Z

I had the same issue, but it was because there was kinda a missmatch between my vite config and my cypress config. specifically with the "server" settings. make sure they are hosted on the same host, same port, and ssl certs are still there if using a custom domain other than localhost

Maxine-Chui · 2023-05-04T00:21:17Z

I had tried Victoria's solution but then it didn't seem like the viteConfig object was merging with our vite.config.ts like it was supposed to, so we got other errors. What ended up working for us was adding fs: { allow: ['/'] } to our server object in our vite.config.ts.
Thanks for the response!

carwack · 2023-05-08T09:30:41Z

Hi,
Seems like I have the same issue, close to what matt-cratebind has.
Adding a plugin or adding server options to the vite.config.js file breaks it for me.

Here is a reproduction repo of my code: https://github.com/carwack/cypress-issue-test-loading
Hope this helps, I have tried the workarounds added above but non seem to work.
Thanks

marktnoonan · 2023-05-11T14:27:13Z

Thanks for the reproduction @carwack, I was able to reproduce locally, so I am routing to the team to take a closer look at this scenario.

warrensplayer · 2023-05-17T20:21:46Z

Hey team! Please add your planning poker estimate with Zenhub @astone123 @jordanpowell88 @lmiller1990 @marktnoonan @mike-plummer

nivoset · 2023-05-25T16:07:33Z

I may have this same problem on:

my tests do not load up, however i also don't see an error, it just hangs forever

Cypress package version: 12.0.2
Cypress binary version: 12.0.2
Electron version: 21.0.0
Bundled Node version: 16.16.0

i am only just now setting up component tests so this would be new, we have a bunch of stuff in e2e, however i am hoping that stuff isn't pulled into component tests overall.

marracuene · 2023-05-28T16:06:30Z

We encountered this after upgrading from Cy 6.x to 11.x (after bad experiences in the past with Cy stability, we were trying to avoid the 'bleeding edge' of Cypress). We were able to overcome it for some tests, but not all, after taking the steps below. We haven't yet had the cycles to isolate what is different about the tests which still hang. We do notice that when running the tests via Cy GUI (i.e. in --watch mode), once a single test has "hung", all other tests will hang (even tests that run normally, if you click them straight after opening the GUI).

cypress: going from 11.2.0 -> 12.13.0 fixed some tests
node: 18.2.1
@angular/stuff 15.2.8
@angular-builders/custom-webpack: 15.0.0
@ionic/angular: 6.7.4
browser: chrome 112

Adding this snippet to our cypress config object fixed one test

component: {
        devServer: {
            framework: 'angular',
            bundler: 'webpack'
        }

lmiller1990 · 2023-06-05T05:00:50Z

A variety of things could cause this - is anyone seeing an error in their console or terminal?

If not, please try to make a minimal reproduction - it's likely an issue in our dev server trying to automatically find your dev server configuration (webpack or vite) and something is going wrong somewhere along the line.

carwack · 2023-06-06T07:58:28Z

@lmiller1990 I do not got any errors in my console or terminal.

This is reproduction I've created before: https://github.com/carwack/cypress-issue-test-loading
Adding a plugin or adding server options to the vite.config.js file breaks it for me.

mberneis · 2023-06-07T18:48:16Z

I have the same problem when trying component testing (E2E Testing works great)

I am attaching the log
cypress.log
One thing to note is that I run cypress in a subfolder of tests/
The component configuration created a new cypress root folder. - I had to move those files and add a supportFile entry to the component configuration:

    component: {
        supportFile: 'tests/cypress/support/component.js',
        excludeSpecPattern:'vendor/**/*',
        devServer: {
            framework: 'vue',
            bundler: 'vite'
        }
    }

matheuspellegrini · 2023-07-04T15:25:37Z

I've faced this same issue and after a long research I've identified that my problem is related to webpack build, so I've tried to build(npm run build) and my webpack run out of memory(WSL), I've 32GB of RAM and this still happends, so I just run this export NODE_OPTIONS=--max_old_space_size=8192 and cypress work again, took me some months to discover this as cypress doesn't stop or show errors related to webpack build(just when succeed). Hope I can help you(I've never found that related solution).

marracuene · 2023-07-04T21:00:31Z

--max_old_space_size=8192

@matheuspellegrini we also use webpack. So we tried your suggestion. Unfortunately doesn't make a difference for us. You did point us in the direction of resource usage. Running htop we can see that Cypress: Config Manager pretty much hogs all the CPU cores continuously while this mysterious 'hanging' is going on. Pretty frustrating that >6m after this issue was opened, it still has no milestone or dev assigned. This is the second long-running issue we have hit with Cypress.

lmiller1990 · 2023-07-05T00:16:58Z

Sorry friends, there's lots of issues to triage and only so many hours in a day.

I'll do my best to reply to each comment here. The "Your test are loading..." means something is not working in the dev server - likely an error that is not correctly caught, so the spec never loads.

@mberneis I reproduced your error. I was able to get it to break with either basicSsl() as a plugin or https: true. Other server options seem fine. I'll look into both of these and find out what the issue is. In End to End testing, we do lots of things relating to self signed certificates, but component testing doesn't do most of these, since there is no cy.visit(). I'm curious why you want to use https in component testing -- any specific use case in mind?

If you just want it to work, and don't actually need the basicSsl and https options for Cypress, and only your main Vite dev server, you could do something like this to provide the Vite config to Cypress, without the options that don't play nicely. I had to change vite.config.js to vite.config.mjs, the whole situation with CJS <> ESM in a complete mess across the entire ecosystem right now, it's very hard to support every combination.

import { defineConfig } from "cypress";
import viteConfig from './vite.config.mjs'

export default defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "vite",
      viteConfig: async () => {
        const { https, ...server } = viteConfig.server
        const plugins = viteConfig.plugins.filter(x => x.name !== 'vite:basic-ssl')
        return {
          ...viteConfig,
          plugins,
          server,
        }
      }
    },
  },
});

I used this to get your Stepper component test to render.

@marracuene and @matheuspellegrini sorry you are hitting issues. I suspect something is getting caught in a loop, or there is a silent webpack error not getting caught (some webpack errors cannot be caught, or at least, I haven't found a good way to manifest them in the Cypress UI). I don't think it's a memory issue, 32 GB is huge (I only have 16GB and haven't had any issues, even on big webpack projects).

If either of you can strip make your repo and make a minimal reproduction, I can clone it and take a look. Without additional information, I can't provide much insight.

whitespacecode · 2023-07-14T08:56:09Z

I am experiencing the same issue. E2E tests run perfectly yet i'm getting the same loading screen trying to setup the component tests. No console errors nothing. This is for Vue3 with Vite

lmiller1990 · 2023-07-16T22:46:13Z

@whitespacecode please share a minimal reproduction. This is the best way to get help. Alternatively, share your vite.config - most of the time there is some kind of collision of plugins.

whitespacecode · 2023-07-17T07:20:27Z

@lmiller1990 It's a large project, it's hard to reproduce a minimal reproduction. My vite.config i can share. We use Inertiajs, and laravel but i'm sure for standalone components this wouldn't mater as much as e2e testing.

import 'dotenv/config';
import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import postcss from './postcss.config.js';
import laravel from 'laravel-vite-plugin';
import { execSync } from 'child_process';

export default defineConfig(({command, mode}) => {
    const env = loadEnv(mode, process.cwd(), '');

    return {
        base: command === 'serve' ? '' : '/build/',
        publicDir: false,
        build: {
            outDir: 'public/build',
            rollupOptions: {
                input: {
                    client: 'resources/js/client.ts',
                    pdf: 'resources/css/pdf.css',
                }
            },
            manifest: true,
            sourcemap: true,
        },
        resolve: {
            alias: [
                { find: '@', replacement: path.resolve(__dirname, './resources/js') },
                { find: 'tailwind.config.js', replacement: path.resolve(__dirname, 'tailwind.config.js') },
                { find: 'ziggy', replacement: path.resolve(__dirname, './node_modules/ziggy-js/dist/vue') },
            ]
        },
        // Define global constants.
        define: {
            __APP_ENV__: JSON.stringify(env.APP_ENV),
        },
        optimizeDeps: {
            include: [
                'tailwind.config.js',
            ]
        },
        plugins: [
            vue(),
            {
                name: 'blade',
                handleHotUpdate({file, server}) {
                    if (file.endsWith('.blade.php')) {
                        server.ws.send({
                            type: 'full-reload',
                            path: '*',
                        });
                    }
                }
            },
            laravel({
                input: 'resources/css/pdf.css',
                valetTls: env.APP_TLD,
              }),
        ],
        css: {
            postcss,
        },
    }
});

lmiller1990 · 2023-07-18T04:12:06Z

Thanks for sharing. Take a look at:

similar issue: Cannot set baseUrl in development laravel/vite-plugin#185
fixed in: [0.7.x] Respects users base config option laravel/vite-plugin#188

If you are still having issues, it might be worth opening a dedicated issue. We will need something more than a configuration to go on, is it really not possible to make a new laravel project with a similar config?

For now I'm closing this issue, since it's tracking something likely unrelated. Happy to help you in a new issue, ideally with more information. Thanks!

crivadeneira-pnc · 2023-07-28T19:18:03Z

I am experiencing the same issue as @victoria-ov I am runing cypress version 12.17.2 and I did what @victoria-ov did but there no solution can somebody guide me how to solve it

illegalnumbers · 2024-02-28T21:45:57Z

I am having the same issue when cypress open is running but when running just headless everything seems fine.

Daria-22 · 2024-08-15T00:52:06Z

when I run tests for second time, they hang. I am only starting to learn Cypress and do not have any complicated configuration.

When I change the config to watch for changes, it runs the changed file first time, but when I change it again - I see the same issue -the test hangs. When I check DevTools, I see this "Permissions policy violation: unload is not allowed in this document."
Please help, I would like to move further in Cypress learning, but such obstacles at the very beginning make me think about Playwrite instead.

jennifer-shehane · 2024-08-15T17:36:36Z

@Daria-22 You've misspelled 'watchForFileChanges'. Probably not related, but I'm unable to reproduce this behavior with your example.

What browser are you running?
Are you using the latest version of Cypress?
Are you just clicking on the second test to have it run?

nagash77 assigned ZachJW34 Sep 21, 2022

ZachJW34 added the stage: awaiting response Potential fix was proposed; awaiting response label Sep 21, 2022

ZachJW34 closed this as completed Sep 22, 2022

nagash77 reopened this Apr 4, 2023

nagash77 assigned astone123 and unassigned ZachJW34 Apr 4, 2023

nagash77 removed the stage: awaiting response Potential fix was proposed; awaiting response label Apr 4, 2023

astone123 assigned jordanpowell88 and unassigned astone123 Apr 11, 2023

jordanpowell88 assigned warrensplayer and unassigned jordanpowell88 Apr 25, 2023

warrensplayer assigned marktnoonan and unassigned warrensplayer May 9, 2023

marktnoonan added the CT Issue related to component testing label May 11, 2023

marktnoonan removed their assignment Jun 8, 2023

marracuene mentioned this issue Jul 6, 2023

Cypress cy.screenshot() timeout during cypress run #5016

Closed

lmiller1990 closed this as completed Jul 18, 2023

LiamTownsley2 mentioned this issue Nov 10, 2023

CI Test Environment LiamTownsley2/Digital-Management-Panel#26

Closed

"Your tests are loading..." shown but no component tests are run #23903

"Your tests are loading..." shown but no component tests are run #23903

Comments

JonRossway commented Sep 20, 2022 • edited Loading

Current behavior

Desired behavior

Test code to reproduce

Cypress Version

Node version

Operating System

Debug Logs

Other

ZachJW34 commented Sep 21, 2022

JonRossway commented Sep 22, 2022

ZachJW34 commented Sep 22, 2022

SantiagoBotero-KSO commented Feb 9, 2023

Branchverse commented Mar 8, 2023 • edited Loading

dmoyadev commented Mar 30, 2023

victoria-ov commented Apr 4, 2023

astone123 commented Apr 4, 2023

jordanpowell88 commented Apr 17, 2023

victoria-ov commented Apr 18, 2023

matt-cratebind commented Apr 19, 2023

Maxine-Chui commented Apr 20, 2023

jordanpowell88 commented Apr 24, 2023

victoria-ov commented May 2, 2023 • edited Loading

cameronscottseequent commented May 3, 2023

Maxine-Chui commented May 4, 2023

carwack commented May 8, 2023 • edited Loading

marktnoonan commented May 11, 2023

warrensplayer commented May 17, 2023

nivoset commented May 25, 2023 • edited Loading

marracuene commented May 28, 2023

lmiller1990 commented Jun 5, 2023

carwack commented Jun 6, 2023

mberneis commented Jun 7, 2023

matheuspellegrini commented Jul 4, 2023

marracuene commented Jul 4, 2023

lmiller1990 commented Jul 5, 2023

whitespacecode commented Jul 14, 2023 • edited Loading

lmiller1990 commented Jul 16, 2023

whitespacecode commented Jul 17, 2023

lmiller1990 commented Jul 18, 2023

crivadeneira-pnc commented Jul 28, 2023

illegalnumbers commented Feb 28, 2024

Daria-22 commented Aug 15, 2024

jennifer-shehane commented Aug 15, 2024

JonRossway commented Sep 20, 2022 •

edited

Loading

Branchverse commented Mar 8, 2023 •

edited

Loading

victoria-ov commented May 2, 2023 •

edited

Loading

carwack commented May 8, 2023 •

edited

Loading

nivoset commented May 25, 2023 •

edited

Loading

whitespacecode commented Jul 14, 2023 •

edited

Loading