cypress
cypress copied to clipboard
cypress-io
"Your tests are loading..." shown but no component tests are run
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
https://github.com/cypress-io/cypress-test-tiny/compare/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
@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>
getting same issue, but in my case I can not fixed with that workaround
getting the same issue, but in my case, I can not fix with that workaround
I'm also facing the same problem. I have everything updated to the last version and it still does not execute any test.
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!
@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
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.
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.
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>
@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?
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.
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
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!
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
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.
Hey team! Please add your planning poker estimate with Zenhub @astone123 @jordanpowell88 @lmiller1990 @marktnoonan @mike-plummer
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.
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'
}
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.
@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.
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'
}
}
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).
--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.
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.
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
@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.
@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,
},
}
});