instrument react source code with cypres

[charleshimmer]

I've read through issue #13, and it seems this is possible but I can't seem to get it to work. I'm trying to instrument the code for when a cypress component test is ran. Here is my current setup.

// cypress/plugins/index.js

const path = require('path');
const { startDevServer } = require('@cypress/vite-dev-server');

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);

  on('dev-server:start', (options) => {
    return startDevServer({
      options,
      viteConfig: {
        configFile: path.resolve(__dirname, 'vite.config.js')
      }
    });
  });

  return config;
};

// cypress/plugins/vite.config.js

import react from '@vitejs/plugin-react';
import istanbul from 'vite-plugin-istanbul';
const path = require('path');

export default {
  build: {
    sourcemap: true
  },
  plugins: [
    react(),
    istanbul({
      include: path.resolve(__dirname, '../../src/*'),
      exclude: ['node_modules', 'cypress/'],
      extension: ['.ts', '.tsx'],
      cypress: true
    })
  ]
};

I have tried various configurations of the istanbul vite plugin but I can't seem to get it to instrument the source code. Cypress is correctly looking for a coverage report, I just seem to be missing how to get the istanbul vite plugin to provide coverage data off the window object.

Any ideas on what I might be missing? Also do you know when the plugin instruments the code with cypress: true, does it stick it under window.__coverage__ or window.coverage?

[charleshimmer]

I should also add I have tried the forceBuildInstrument config option but given this is a component test I don't think that applies to my setup.

[charleshimmer]

Had to read through the source code but finally figured out what I needed for it to work. Cypress component testing still uses vite in serve mode so did not want forceBuildInstrument on. Needed the following config for it to work for me:

import react from '@vitejs/plugin-react';
import istanbul from 'vite-plugin-istanbul';

export default {
  build: {
    sourcemap: true
  },
  plugins: [
    react(),
    istanbul({
      cypress: true,
      requireEnv: false
    })
  ]
};

[iFaxity]

Hi @charleshimmer.

Great that you solved it, yes the Cypress component testing is very specific with how vite needs to run. By default this plugin only runs when Vite is in serve mode. To prevent accidental instrumentation sneaking its way into production or staging builds.

Therefore the forceBuildInstrument option was added for users who know what they want and can opt into this feature to get coverage at build time. Which by default is set to false to prevent the issue i mentioned earlier.

I will see if i can add some kind of detection to if the plugin has malformed options when running in cypress component testing. But this will not be a priority and i'll look into it in the future.

[Emrald-TA]

@charleshimmer and @iFaxity , I am trying to get coverage for a Vue+Vite app using Cypress as the test framework. I have a similar setup, except that I am trying to run coverage on the ./dist folder post building the app. However, I am still getting coverage for the ./src folder for some reason and no coverage information from the ./dist folder. All the files do show up in the report but coverage is available only for the ./src folder. If possible, could you probably tell me what I am doing wrong here?

P.S: I am running the app using vite preview and running cypress e2e tests after that. This is also done in a docker container.

// .nycrc

{
    "all": true,
    "extends": "@istanbuljs/nyc-config-typescript",
    "report-dir": "test/coverage",
    "temp-dir": "test/.nyc_output",
    "include": ["dist/"],
    "exclude": ["test", "src"]
}

// vite.config.ts

const config = defineConfig({
  build: {
    target: "esnext",
    sourcemap: process.env.CI_ENV == "test" ? true : false,
  },
  plugins:
    process.env.CI_ENV == "test" ?
      [vue(), istanbul({cypress: true, nycrcPath: "./.nycrc", forceBuildInstrument: true})] :
      [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, "./src"),
      },
    ],
    extensions: ['.js', '.ts', '.d.ts', '.vue']
  },

  server: {
    host: "0.0.0.0",
    port: 80,
    https: false,
  },
  preview: {
    host: "0.0.0.0",
    port: 81,
    https: false,
  }
})

Below is a screenshot of the coverage report.

[lmiller1990]

It sure would be good to get Cypress to play nicely with this out of the box. I know Cypress pretty well by this point, if there's anything needed on the Cypress end, let me know and I'll make it happen.

I am also going to play around with this a bit. I'll see what I can come up with.

[iFaxity]

Hi @lmiller1990, yes that would be great!

I've not looked anymore into this, but I would imagine that this is a issue by how the coverage report is created. Not sure if it is a Vite issue or Cypress.

I'll be waiting if you have any more information on your end.
In the meantime I'll do some digging into Vite.

[iFaxity]

Closing this as the original issue was fixed