How to use with Cypress Component Testing

Question

How to use with Cypress Component Testing

lmiller1990 opened this issue a year ago · comments

Hi,

I am looking into supporting coverage with Vite and Cypress Component Testing, ideally out of the box for any Vite project. I see some issues regarding this here, but no concrete example. Note this is not for End to End testing an app using Vite as the dev server, but the Component Testing mode included in Cypress 10+.

I added the plugin like the documentation suggests, but always end up with

My vite.config.ts:

import { defineConfig } from "vite";
import istanbul from "vite-plugin-istanbul";
// import { instrumentPlugin } from "./instrument";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    istanbul({
      include: "src/*",
      exclude: ["node_modules"],
      extension: [".js", ".jsx", ".ts", ".vue"],
      requireEnv: true,
      cypress: true,
      forceBuildInstrument: true
    })
  ]
})

Is there something I'm missing?

Christian Norrman · Answer 1 · Wed Dec 28 2022 23:28:03 GMT+0800 (China Standard Time)

Hi @lmiller199, thanks for the issue.

As requireEnv is set to true, Vite needs to be started with the env variable VITE_COVERAGE set to true. As the config cypress is set to true however the variable is changed to CYPRESS_COVERAGE.

I'm not 100% sure but does Cypress somehow launch Vite by itself when component testing? If that is the case i would remove the requireEnv config variable (or set it to false). Or maybe there is a way for Cypress to pass down env variables in that case maybe start Cypress with CYPRESS_COVERAGE set to true.

Christian Norrman · Answer 2 · Wed Dec 28 2022 23:38:42 GMT+0800 (China Standard Time)

Also forceBuildInstrument should probably not be set. Depends how Cypress runs Vite with Component testing. As forceBuildInstrument makes the plugin only apply when Vite is run in build mode. Not in serve mode (which is the "default" run mode in Vite).

Lachlan Miller · Answer 3 · Thu Dec 29 2022 06:06:13 GMT+0800 (China Standard Time)

Yep, we launch Vite for you in the background.

I will try changing the variable to CYPRESS_COVERAGE. Once I get a minimal example working, I'll share it.

Christian Norrman · Answer 4 · Thu Dec 29 2022 08:16:45 GMT+0800 (China Standard Time)

Looking forward to the example, I'll gladly have a look and dig around to find a solution that fits Cypress well.

Maybe in the near future add some flag to set the necessary config for Cypress component testing by default, or somehow detect it. Maybe just use a env variable to control it like VITE_CYPRESS_MODE.

OrbisK · Answer 5 · Mon Feb 06 2023 21:12:09 GMT+0800 (China Standard Time)

Yep, we launch Vite for you in the background.

I will try changing the variable to CYPRESS_COVERAGE. Once I get a minimal example working, I'll share it.

Any updates? 👀

Lachlan Miller · Answer 6 · Tue Feb 07 2023 07:11:44 GMT+0800 (China Standard Time)

I didn't end up pursuing this - I think the problem was I was not importing @cypress/code-coverage in my plugins file.

This is a webpack guide, but the ideas should be almost identical. https://muratkerem.gitbook.io/cctdd/ch30-appendix/combined-code-coverage

Paolo Caleffi · Answer 7 · Tue Feb 14 2023 15:59:43 GMT+0800 (China Standard Time)

@lmiller1990 dunno if it can help, but we implemented it into Quasar Cypress AE

Some relevant files:

Radoslav Irha · Answer 8 · Tue Feb 14 2023 17:19:28 GMT+0800 (China Standard Time)

Hi,

I'm user of quasar + vite. ^^ quasar utils basically works, but I can't get total coverage with all: true in .nycrc.

I can see all the files in report, but all with zeros and are not considered in total coverage calculation.

I don't know where is the issue, but in .nyc_output/out.json there is bunch of empty components:

"someComponent.vue": {
  "path": "someComponent.vue",
  "statementMap": {},
  "fnMap": {},
  "branchMap": {},
  "s": {},
  "f": {},
  "b": {}
}

I described it more in quasarframework/quasar-testing#319 (comment)

Can anybody help me to instrument not covered files? I'm new in this area so I think it must be instrumented?

Thanks

Christian Norrman · Answer 9 · Wed Feb 15 2023 17:49:06 GMT+0800 (China Standard Time)

@radik24 Please create a seperate issue to this as this is not related to component testing 😀.

Lachlan Miller · Answer 10 · Thu Feb 16 2023 08:44:56 GMT+0800 (China Standard Time)

I can't remember what I did but someone helped me get this working - no bug. We should definitely include a minimal example repo if someone has one. I don't have one right now, but I'll share if I make one.

For now, going to close - no actionable work for the maintainer.

OrbisK · Answer 11 · Thu Feb 16 2023 18:25:55 GMT+0800 (China Standard Time)

FYI: I got component tests working.

// vite.config.ts
export default defineConfig((config) => {
    process.env = {
      ...process.env, ...loadEnv(config.mode, process.cwd()),
    }
  return {
      plugins: [
        vue(),
        process.env.CYPRESS === "true" ? IstanbulPlugin({
          include: 'src/*',
          exclude: ['node_modules', 'test/', "**/*.cy.js", "dist"],
          extension: ['.js', '.ts', '.vue'],
          requireEnv: false,
        }): undefined,
      ],
    }
  }
)

// cypress.config.ts
import coverage from '@cypress/code-coverage/task'

export default defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "vite"
    },
    setupNodeEvents(on, config){
      coverage(on, config)
      return config
    }
  },
)

//package.json
{
"nyc": {
    "reporter": [
      "cobertura",
      "html"
    ],
    "extension": [
      ".js",
      ".cjs",
      ".mjs",
      ".ts",
      ".tsx",
      ".jsx",
      ".vue"
    ]
  }
}

// component.ts
import '@cypress/code-coverage/support'
import { mount } from 'cypress/vue'

I did not used cypress: true and requireEnv, because vite will not load CYPRESS_COVERAGE from .env[.mode] because it does not start with VITE

Maybe cypress: true should listen on process.env.CYPRESS?

Murat K Ozcan · Answer 12 · Fri May 12 2023 02:14:06 GMT+0800 (China Standard Time)

Works painlessly in this sample repo.

https://github.com/muratkeremozcan/tour-of-heroes-react-vite-cypress-ts/blob/main/cypress.config.ts

With a similar enough config, in a monorepo with React 16, I have trouble with code instrumentation.

Christian Norrman · Answer 13 · Fri May 12 2023 02:36:48 GMT+0800 (China Standard Time)

Hi @muratkeremozcan, please open a separate issue for this and include the repo that doesn't work to debug the plugin.

Otherwise it will be hard to debug and reproduce the issue. Thanks!

Veselin Mitev · Answer 14 · Sat May 18 2024 16:37:12 GMT+0800 (China Standard Time)

// cypress.config.ts
import coverage from '@cypress/code-coverage/task'

export default defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "vite"
    },
    setupNodeEvents(on, config){
      coverage(on, config)
      return config
    }
  },
)

@OrbisK This solved my problem, thanks so much! I was battling with it for half a day!