Component tests are not started with message "Your tests are loading..."

[QL-Anton]

Current behavior

I've add first component tests and trying to run it. Browser started m but stuck with message "Your tests are loading..."

Desired behavior

Component test is started

Test code to reproduce

Just small component tests with mount function

Cypress Version

12.7.0

Node version

16.13.0

Operating System

12.5.1

Debug Logs

No response

Other

No response

[nagash77]

Hi @QL-Anton , in order for Cypress devs to be able to look into this further we will need a reproducible example.

Please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[QL-Anton]

Hi @QL-Anton , in order for Cypress devs to be able to look into this further we will need a reproducible example.

Please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

Hi @nagash77 ! Thanks for the reply, here is the code snippets with my settings https://gist.github.com/QL-Anton/e04fb9703a8e67305c148f669a3a243e

[mike-plummer]

@QL-Anton Unfortunately the gist you supplied references code we don't have access to (@website/internal-js/config/webpack.config) so we cannot reproduce your issue. Looking at the gist itself I don't notice any major misconfigurations except for the naming of your component.tsx file - is there a reason you're trying to use .tsx instead of .ts? Also, have you verified that the path to the custom webpack config you're using resolves at runtime? const webpackConfig = require('./config/webpack/webpack.config');

My assumption is that there is an issue with the webpack config you're attempting to supply and how it is being merged into Cypress - are there any errors or warnings logged to your console? Can you enable Debug Logs and attach the output here to help us diagnose your issue?

[Branchverse]

I probably have the same issue:

• Setup: NixOs SvelteKit Vite

Things I figured In dev Tools it looks for the file under localhost:5173/__cypress/iframes//home/.../file.unit.ts
This throws a 404 Error as the file can't be found (even tho it is selected via the UI)

• I suspect this has something todo with the //home in the path instead of smth like iframes/lib/components I tried out all kinds of settings in the cypress conf

Unfortunately I am not at the PC rn and can't send the files.

• I defined specPatterns in both component and e2e
• set a devServer in component
• Open UI
• Run e2e tests (!!WORKS!!)
• Run unit tests (Perma loading and console shows File Not Found)
• Not sure what I did
• Run unit tests (perma loading and request for the file is pending permanently)

[lmiller1990]

@Branchverse Hm I wonder why it's looking for /home - once you are back on your PC, if you can share a minimal example I can, that'd be really useful.

@QL-Anton if you can include '@website/internal-js/config/webpack.config', that would be very useful. 🙏

[Branchverse]

@lmiller1990 sample project https://github.com/Branchverse/sveltekit-cypress-bug specs:

• sveltekit,
• cypress 12.8.1

[lmiller1990]

Thanks!

I see this issue:

I will see if I can find the cause and fix it.

[lmiller1990]

I found two issues.

1. Cypress not working with Vite 4.2 That was fixed just now in https://github.com/cypress-io/cypress/pull/26139, it will be in the next version of Cypress (within 2 weeks). For now, you could use Vite 4.1.
2. We have support for Svelte, but not SvelteKit. I'll see what it'll take to implement SvelteKit. To test this out, I changed the vite.config.ts:

// import { sveltekit } from '@sveltejs/kit/vite';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [svelte()]
});

Not ideal, since you are using SvelteKit.

What you could do, until we support SvelteKit out of the box, is have a modifying Vite config in your cypress.config.ts:

import { defineConfig } from 'cypress';
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    component: {
        setupNodeEvents(on, config) {
            return Object.assign({}, config);
        },
        devServer: {
            framework: 'svelte',
            bundler: 'vite',
            viteConfig: () => {
                return {
                    plugins: [svelte()]
                }
            }
        },
        specPattern: 'src/**/*.{cy,unit}.{js,jsx,ts,tsx}',
    },
});

[lmiller1990]

Comments relating to SvelteKit: https://github.com/cypress-io/cypress/issues/23618#issuecomment-1475438023

[QL-Anton]

@Branchverse Hm I wonder why it's looking for /home - once you are back on your PC, if you can share a minimal example I can, that'd be really useful.

@QL-Anton if you can include '@website/internal-js/config/webpack.config', that would be very useful. 🙏

Thanks for reply @lmiller1990 ! I cannot include webpack configuration here, I will have a look on my own, thanks!

[QL-Anton]

@QL-Anton Unfortunately the gist you supplied references code we don't have access to (@website/internal-js/config/webpack.config) so we cannot reproduce your issue. Looking at the gist itself I don't notice any major misconfigurations except for the naming of your component.tsx file - is there a reason you're trying to use .tsx instead of .ts? Also, have you verified that the path to the custom webpack config you're using resolves at runtime? const webpackConfig = require('./config/webpack/webpack.config');

My assumption is that there is an issue with the webpack config you're attempting to supply and how it is being merged into Cypress - are there any errors or warnings logged to your console? Can you enable Debug Logs and attach the output here to help us diagnose your issue?

I will rename to .ts instead of .tsx and will have a look to debug logs, thanks a lot @mike-plummer for your proposals!

[QL-Anton]

I'm getting in console error after running component test, might it be the root cause of the issue ? DevTools failed to load source map: Could not load content for http://localhost:3035/__cypress/runner/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE ?

[mike-plummer]

@QL-Anton That is a known issue and is just a warning about the browser not being able to load a sourcemap file - it does not impact your tests

[QL-Anton]

@QL-Anton Unfortunately the gist you supplied references code we don't have access to (@website/internal-js/config/webpack.config) so we cannot reproduce your issue. Looking at the gist itself I don't notice any major misconfigurations except for the naming of your component.tsx file - is there a reason you're trying to use .tsx instead of .ts? Also, have you verified that the path to the custom webpack config you're using resolves at runtime? const webpackConfig = require('./config/webpack/webpack.config'); My assumption is that there is an issue with the webpack config you're attempting to supply and how it is being merged into Cypress - are there any errors or warnings logged to your console? Can you enable Debug Logs and attach the output here to help us diagnose your issue?

I will rename to .ts instead of .tsx and will have a look to debug logs, thanks a lot @mike-plummer for your proposals!

I've run the DEBUG-logs and here are errors which I found in output

cypress:server:browsers:utils WebKit 90m───────────────┘ is enabled, but there was an error constructing the WebKit browser: { err: Error: Cannot find module 'playwright-webkit'... CypressError:cy.mount()` must be implemented by the user. There are full instructions for doing so at the following location.

https://on.cypress.io/mount

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: example to-do app `

[mike-plummer]

@QL-Anton The first error is related to having experimentalWebKitSupport enabled without the necessary dependencies, but this would simply prevent use of WebKit and shouldn't impact your component tests. The second error related to cy.mount tells me your Component support file (component.ts) is not being executed since that file is responsible for registering the mount command for React - are there any errors in your browser devtools or debug logs related to that file? Is it possible your custom webpack config is preventing that file from being processed/imported correctly?

[lmiller1990]

Happy to reopen once we've got more information to continue debugging. Until then, I'll close this, since I don't see any actionable work in Cypress relating to this issue.

[DegradingGracefully]

Hello all. I can confirm that we still can't use Cypress in "Component Testing" mode with SvelteKit, as of July 2023. It works ok in "E2E Testing" mode though.

Here are the versions of the packages I use, which must be close to latest versions as the reproduction project is just fresh out of the bootstrapping script:

"devDependencies": {
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.20.4",
    "svelte": "^4.0.0",
    "svelte-check": "^3.4.3",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^4.3.6"
}

The symptom looks similar to the original poster description: the test doesn't load, stuck with the message "Your tests are loading..." . And it tries to access a weird URL:

GET http://localhost:5173/__cypress/iframes//home/manu/Documents/prog/my_projects/svelte_projects/cypress_sveltekit_project/src/lib/components/Stepper.cy.js 404 (Not Found)

as visible in the screenshot.

Reproduction

I put a minimal reproduction of the problem on my GitHub here: https://github.com/DegradingGracefully/cypress_sveltekit_project

This project is just the "default" SvelteKit skeleton project that I generated by running npm create svelte@latest

Then I "npm install --save-dev cypress"

And finally I added the Stepper component from the official Cypress documentation: https://docs.cypress.io/guides/component-testing/svelte/quickstart

---

As a last note, I thought interesting to explain why I need the Component Testing mode: the Svelte component I am building and testing takes an external property that contains its data.

Therefore, I need to be able to "inject" the mock data from Cypress into this component. Which I could do in Component Testing mode, but not in regular E2E Testing mode. I can't communicate directly with the components in this mode.

A viable alternative in my case may be that Cypress puts the mock data in the database instead.

Thank you!

[lmiller1990]

Hi @DegradingGracefully - you are correct, I have the same issue. SvelteKit is overwriting the base option for the Vite config.

I found a work around https://github.com/cypress-io/cypress/issues/26064#issuecomment-1475437226. Not ideal -- I'm going to see if I can modify Cypress to support something better out of the box.

In the meantime, does that work around (using Svelte plugin, not the SvelteKit plugin) work for you?

[DegradingGracefully]

Hello @lmiller1990 . Thank you for your swift help. I didn't try your older answer before, as I don't feel at ease with Vite or Cypress configuration.

I've now tested your fix in cypress.config.ts, and it seems to work.

Note that I have only tested inside my small reproduction project so far, though. I will make some additional tests in my real project, and come back to you shortly.

About the fix itself, it is good enough in my particular case.

[lmiller1990]

Great! There are multiple issues discussed here. If anyone has a similar problem, please log a new issue with a minimal reproduction and I will try to help you. Thanks!

[DegradingGracefully]

Hello @lmiller1990,

I see you have marked this issue as completed. Unfortunately, personally I'd rather consider that Component Testing doesn't work for SvelteKit yet.

Sorry to change opinion about the fix you suggested. I have since had some time to dig into the problem.

And, since I have very little knowledge of build tools, and no knowledge of Svelte internals, I'd prefer not go the road of replacing the vite configuration that is exposed through plugins: [sveltekit()] in vite.config.ts by the plugins: [svelte()] fix you suggested. Unless you can assert that there is little risk to do this.

If not, personally I will stick to the E2E Testing mode for my small SvelteKit project, for now.

I also didn't plan time to look into this configuration issue.

Thank you!

[DegradingGracefully]

@lmiller1990 would you prefer that I open a new issue, with a clearer title for further references. And where I copy the info here ? About the title, I believe it would be clearer to simply state something like "Component Testing with Svelte Kit doesn't work" ?

[lmiller1990]

Actually I think we have an issue - SvelteKit Support - here it is: https://github.com/cypress-io/cypress/issues/23618

You could post there to express support for this feature request. I agree it would be nice to work out of the box with SvelteKit.

[DegradingGracefully]

@lmiller1990 I see, there's a main issue dedicated to SvelteKit compatibility then. I may check again later, as I am putting my project on standby for now. Thank you.

[benjaminknox]

@lmiller1990 Solution seems to work for me, thanks!