code-coverage

code-coverage copied to clipboard

Hi everyone, I'm trying to implement code coverage in my project react CRA + Typescript in e2e and unit tests and what is happening, is that when I run e2e tests, everything works fine but when I run unit testing, the files from the coverage folder and the .nyc_output folder are not being generated

I'm follow this tutorial: https://docs.cypress.io/guides/tooling/code-coverage.html#Introduction

package.json

{
  ...
  "devDependencies": {
    ...
    "@cypress/code-coverage": "^3.8.5",
    "babel-eslint": "^10.1.0",
    "babel-plugin-istanbul": "^6.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "cypress": "^6.1.0",
    "istanbul-lib-coverage": "^3.0.0",
    "nyc": "^15.1.0"
  },
  ...
}

.babelrc

{
    "presets": ["react-app", "@babel/preset-react"],
    "env": {
      "development": {
        "plugins": ["istanbul"]
      }
    },
    "plugins": ["transform-class-properties"]
}

cypress/plugins/index.ts

/// <reference types="cypress" />
const browserify = require("@cypress/browserify-preprocessor");

module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
	require("@cypress/code-coverage/task")(on, config);

	const options = browserify.defaultOptions;
	options.browserifyOptions.transform[1][1].babelrc = true;
	on("file:preprocessor", browserify({ ...options, typescript: require.resolve("typescript") }));

	return config;
};

cypress/support/index.ts

import "@cypress/code-coverage/support";
import "./commands";

To start testing, fisrt i start application with yarn start and after i run yarn cypress run --spec './cypress/integration/units/**/*'

I'm testing on my windows 10 computer with powershell but I need this to put in docker container to run on Drone CI. I'll run the unit tests on each PR and when I open a PR for master/main I'll run the unit tests and e2e tests

The console log shows:

Cannot find coverage file C:\Users\Paulo\Desktop\teste-eject\.nyc_output\out.json
Skipping coverage report

@bahmutov have you had time to look at this issue?

No, and without a reproducible example that I can run it would be hard for me to dedicate time to this issue.

Sent from my iPhone

On Jan 8, 2021, at 07:47, Paulo Carvalho [email protected] wrote:

 @bahmutov have you had time to look at this issue?

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

@bahmutov , when you get some time, you have here the example, thanks :)

Unit test example:

export function isObject(object: any) {
	return object != null && typeof object === "object";
}

src/base/helpers/coreHelper.ts

/// <reference types="cypress" />

import { isObject } from "../../../../../src/base/helpers/coreHelper";

describe("Core Helpers", () => {
	it("Is Object", () => {
		expect(isObject({})).to.eq(true);
	});
});

cypress/integration/units/base/helpers/core.spec.ts

@paulocarvalho2899 I do not see an example link? Could you create a repo with a reproducible example? Something where I can do "yarn" and "yarn cypress open" and see the test?

@bahmutov, I apologize for the delay.

You can test from this repository: https://github.com/paulocarvalho2899/react-typescript-cypress-code-coverage-problem

Thanks for your time :)

const browserify = require('@cypress/browserify-preprocessor')
const options = browserify.defaultOptions
options.browserifyOptions.transform[1][1].babelrc = true
// instrumentation is not working if we set
options.typescript = require.resolve('typescript')
module.exports = browserify(options)

blocked by https://github.com/cypress-io/cypress-browserify-preprocessor/issues/62

I'm also looking for getting coverage from unit-tests in a CRA project and when trying out the example/unit-tests-ts, it is not generating any coverage (see attached image).

@bahmutov Can u please provide a solution to this issue? Of all the work we did to replace testing framework from Jest and Selenium to Cypress last year, this is the only limitation we are stuck now. Thanks.

Same here for me with this plugin file :

const browserify = require("@cypress/browserify-preprocessor");
const cucumber = require("cypress-cucumber-preprocessor").default;
const resolve = require("resolve");

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'))
  const options = {
    ...browserify.defaultOptions,
    typescript: resolve.sync("typescript", { baseDir: config.projectRoot }),
  };

  on("file:preprocessor", cucumber(options));
  return config;
};

Is this a misconfiguration because i'm using cucumber also ?

I'm using this cypress config file :

{
  "baseUrl": "base_url",
  "testFiles": "**/*.feature",
  "env": {
    "TAGS": "not @ignore and @focus",
    "NODE_ENV": "cypress"
  },
  "retries": 3
}

and this babelrc file (i'm using env to avoid conflicts with jest built-in istanbul import):

{
  "presets": ["next/babel"],
  "env": {
    "cypress": {
      "plugins": ["istanbul"]
    }
  }
}

Hello people We are having the same issue, Is there any update??

Same here for me with this plugin file :

const browserify = require("@cypress/browserify-preprocessor");
const cucumber = require("cypress-cucumber-preprocessor").default;
const resolve = require("resolve");

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  on('file:preprocessor', require('@cypress/code-coverage/use-browserify-istanbul'))
  const options = {
    ...browserify.defaultOptions,
    typescript: resolve.sync("typescript", { baseDir: config.projectRoot }),
  };

  on("file:preprocessor", cucumber(options));
  return config;
};

Is this a misconfiguration because i'm using cucumber also ?

I'm using this cypress config file :

{
  "baseUrl": "base_url",
  "testFiles": "**/*.feature",
  "env": {
    "TAGS": "not @ignore and @focus",
    "NODE_ENV": "cypress"
  },
  "retries": 3
}

and this babelrc file (i'm using env to avoid conflicts with jest built-in istanbul import):

{
  "presets": ["next/babel"],
  "env": {
    "cypress": {
      "plugins": ["istanbul"]
    }
  }
}

In fact it's working when I'm building and launching my code locally, but not in my CI. It keeps telling me that it can't find out.json file.

I am also facing the same issue. Is there a way available now to generate the .nyc_output in the automated build?

has anyone managed to make progress with this issue?

@bahmutov have a look at this repo SVGPathCommander direct link to workflow run the exact same issue

Cannot find coverage file /home/runner/work/svg-path-commander/svg-path-commander/.nyc_output/out.json
Skipping coverage report

I'm using esbuild with istanbul instrumenter, working flawless on my machine, fails on Github.

Appreciate any input from anyone.

any news regarding this issue? I'm facing with the same problem when trying to do code coverage on the tested project by cypress. @aslamj @bahmutov

I don't know if this is the case for all the situations reported here, but I hit this error message this past week and it was caused by the application code not being instrumented for code coverage when running in the CI process. It worked fine locally, as it was going through a different code pathway and it was instrumented in that case.