Cypress 7 support

[dvopalecky]

Is there a plan to support cypress@7 which has the native component tester? If so, can the readme be updated with info how to setup with cypress@7? Thank you

[bahmutov]

I should do it. It is nothing more than sticking a bundler into cypress start process. So should not be too bad

Sent from my iPhone

On May 8, 2021, at 15:52, Daniel Vopalecky @.***> wrote:

 Is there a plan to support @. which has the native component tester? If so, can the readme be updated with info how to setup with @.? Thank you

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[dvopalecky]

Thanks Gleb, that would be wonderful.

As a very dirty workaround I made it work by the following:

• follow cypress 7.0 migration guide
  • Remove "experimentalComponentTesting": true from cypress.json
  • npm install @cypress/webpack-dev-server
  • Update plugins/index.js to use dev-server:start (Details)
• comment few lines in node-modules/cypress-svelte-unit-test to disable throwing the error In order to use mount or unmount functions please place the spec in component folder
• import the svelte module using absolute path in my helloWorld.spec.js file

[aislanmaia]

• @cypress/webpack-dev-server

This I should replace it to vite-dev-server

[dvopalecky]

I should do it. It is nothing more than sticking a bundler into cypress start process. So should not be too bad

Hello @bahmutov, any updates on this? Thank you.

[JohnnyFun]

We're just using webpack, so all of our component tests work by just using @dvopalecky's suggestion above. I created a PR for that change, so that it will work for cypress@6.x or cypress@7.x.

Long live cypress and svelte!

[unlocomqx]

Using cypress 7.7.0, it shows this error

In order to use mount or unmount functions please place the spec in component folder

I had to comment out if (Cypress.spec.specType !== 'component') { in cypress-svelte-unit-testto get it to work. Is there a better way?

[lalilaloe]

So rollup isn't supported? I can't get the webpack fix to work with the webpack.config.js. @cypress/rollup-dev-server seems to be removed on 7.x. If i try https://github.com/cypress-io/cypress/tree/6.9.1-release/npm/rollup-dev-server i get all kind of lstat errors Error: EPERM: operation not permitted, lstat 'public\build\bundle.css' when the server is running. Or still webpack errors when the dev server is not running Error: Webpack Compilation Error ./src/components/HelloWorld.svelte 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file..

The plugin config i use

const { startDevServer } = require('@cypress/rollup-dev-server')
const rollupConfig = require('../../rollup.config.js').default

module.exports = (on, config) => {
  on('dev-server:start', (options) => {
    return startDevServer({ options, rollupConfig })
  })
  return config
}

[Leonidaz]

@arschmitz created a pull request https://github.com/bahmutov/cypress-svelte-unit-test/pull/270 that uses webpack and removes the deprecated Cypress 7 rollup setup.

[alejandroiglesias]

What's the status of this? Is there any progress towards supporting Cypress 7/8?

[VismaTobbe]

@bahmutov, just removing the "throw" in utils.js seems to do the trick for me. Have not found any problems as of yet with it.

function checkMountModeEnabled() {
    // @ts-ignore
    if (Cypress.spec.specType !== 'component') {
        // throw new Error("In order to use mount or unmount functions please place the spec in component folder");
    }
}

[blindfish3]

@bahmutov, just removing the "throw" in utils.js seems to do the trick for me. Have not found any problems as of yet with it.

@VismaTobbe - where do you make the change to utils.js? I tried to change it under node_modules/cypress-svelte-unit-test/dist/utils.js but it didn't work. It looks to me like Cypress was using a cached version from somewhere; but even after clearing cypress cache I'm still seeing that error :/

I'm trying to get this working with Sveltekit + Vite and TS; but it's proving too painful to be reliable at this stage.

[VismaTobbe]

@bahmutov, just removing the "throw" in utils.js seems to do the trick for me. Have not found any problems as of yet with it.

@VismaTobbe - where do you make the change to utils.js? I tried to change it under node_modules/cypress-svelte-unit-test/dist/utils.js but it didn't work. It looks to me like Cypress was using a cached version from somewhere; but even after clearing cypress cache I'm still seeing that error :/

I'm trying to get this working with Sveltekit + Vite and TS; but it's proving too painful to be reliable at this stage.

Think I did it in node_modules (try locate it in dev tools F12 and see where the file loaded from). I moved away from this project since it did not seem active.

This might be of interest for you since you are running svektekit (vite) I now do component testing (open-ct https://www.cypress.io/blog/2021/04/06/introducing-the-cypress-component-test-runner/#header) with vite-dev-server https://docs.cypress.io/guides/component-testing/framework-configuration#Vite-Based-Projects-Vue-React

And created a custom cypress command to mount components https://docs.cypress.io/api/cypress-api/custom-commands#Syntax

// mount  
import type {SvelteComponent, SvelteComponentTyped} from "svelte";

declare global {
    namespace Cypress {
        interface Chainable {
            mount: typeof mount;
        }

        interface MountCallback<T> {
            (args: { target: HTMLBodyElement, component: T }): void;
        }
    }
}

function mount<TComponentType extends SvelteComponentTyped = any, TComponentProps = any>(
    component: typeof SvelteComponent,
    props?: TComponentProps,
    callback?: Cypress.MountCallback<TComponentType>) {

    window.parent.document.title = Cypress.currentTest.titlePath.join(" » ");

    // @ts-ignore
    const document: Document = cy.state("document");
    const target = document.body as HTMLBodyElement;
    target.innerHTML = "";

    const result = {target, component: new component({target, props}) as TComponentType};
    cy.wrap(result);
    callback?.(result);
}

Cypress.Commands.add("mount", mount);

[blindfish3]

@VismaTobbe - Thanks! You just made my day: thanks to your custom command I've got it working :)

I just had to amend my /cypress/plugins/index.js as follows:

• added: const { svelte } = require('@sveltejs/vite-plugin-svelte');
• then included that in startDevServer:

  module.exports = (on, config) => {
  on('dev-server:start', (options) => {
      return startDevServer({
          options,
          viteConfig: {
              plugins: [svelte()]
          },
      })
  })
  };

  Obviously this doesn't include any of the config options set in svelte.config.js; though for now I can copy those over manually.

[VismaTobbe]

@blindfish3 cant you just import svelte.config.js and set it?

[blindfish3]

@blindfish3 cant you just import svelte.config.js and set it?

Is that possible? It's an ES6 module...

[VismaTobbe]

@blindfish3 try this then... create a vite.config.js, import svelte.config.js.

then in index.ts do:

module.exports = (on, config) => {
    on('dev-server:start', (options) => {
        return startDevServer({
            options,
            viteConfig: {
                configFile: '..\..\vite.config.js' <!---- the vite file
            },
        })
    })
};

Just a "blind" suggestion :) i dont have sveltekit but this would allow you to import you svelte config.