code-coverage

code-coverage copied to clipboard

Is your feature request related to a problem? Please describe. I was following the Cypress Full Stack Code Coverage guide and wanted to instrument my express back end by doing the following in my index.ts file:

import express from "express";
import cypressCodeCoverage from "@cypress/code-coverage/middleware/express";

const app = express();
cypressCodeCoverage(app);

I get the "Try npm install @types/cypress__code-coverage if it exists or add a new declaration (.d.ts) file containing declare module '@cypress/code-coverage/middleware/express';" error. When I tried to install the DefinitelyTyped module, I realized one does not exist for @types/cypress__code-coverage.

Describe the solution you'd like Either a new package in the DefinitelyTyped repo for @types/cypress_code-coverage, or for the package itself to natively support typescript for back end instrumentation.

Describe alternatives you've considered I'm happy to workaround this in the mean time by adding a global type declaration file for my package. I just wanted to see if you had any plans to support this or if you'd be okay with me putting up a PR for it (and see which approach you preferred)!

Additional context Let me know if you need anything else!

We're open to work to make this work, but this is not a priority for this repo at the moment.

Any updates on this yet? Typescript support is a must-have for me (and I'm sure many others too).

@dvargas92495 here are my current global.d.ts definitions (if you haven't made some already):

// cypress/plugins/global.d.ts
declare module '@cypress/code-coverage/task' {
  export default function codecov(
    on: Cypress.PluginEvents, 
    config: Cypress.PluginConfigOptions
  ): void;
}

You can then use it in your cypress/plugins/index.ts like so:

// cypress/plugins/index.ts
import codecov from '@cypress/code-coverage/task';

export default function plugins(
  on: Cypress.PluginEvents, 
  config: Cypress.PluginConfigOptions
): Cypress.ConfigOptions {
  codecov(on, config);
  return config;
}

Note: You must first add the global cypress type definitions in your tsconfig.json to be able to reference them like that:

// cypress/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

@nicholaschiang this was deprioritized on my end as I moved away from the project that was using cypress code coverage. Doesn't mean we can't add to the DefinitelyTyped Repo! I'd be down to combine what I had from that project and what you have here as sort of a v1 that other people could use and grow from there

Hello, I'm late to the party, but is there a new workaround you guys managed to implement, I'm working on a heavy typescript project and while implementing the code coverage plugin, I get the same issue "Try npm install @types/cypress__code-coverage if it exists or add a new declaration (.d.ts) file containing declare module '@cypress/code-coverage/middleware/express';".

Still not using the plugin, though I hope to whenever I reintoduce e2e testing on my projects.

I would recommend declaring the types in your own project for now

I don't see any reason to add types to the DefinitelyTyped repo in 2022. It should be pretty easy to just add the type directly in this package.

Quick update based on the plugins changes (deprecation) with Cypress 10:

cypress/global.d.ts

/**
 * Types are not supported for `@cypress/code-coverage`
 *
 * @see https://github.com/cypress-io/code-coverage/issues/257
 */
declare module '@cypress/code-coverage/task' {
  export function registerCodeCoverageTasks(
    on: Cypress.PluginEvents,
    config: Cypress.PluginConfigOptions
  ): void
}

cypress.config.ts

import { registerCodeCoverageTasks } from '@cypress/code-coverage/task'
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      registerCodeCoverageTasks(on, config)
      return config
    },
    baseUrl: 'http://insert-your-url-here',
  },
})