CODEWITHSUNDEEP
typescriptcypress
Roland Bielski
Roland Bielski

Reputation: 41

Cypress code coverage plugin with TypeScript

I'm trying to make the @cypress/code-coverage plugin work with TypeScript in my project, currently without success. Here are the detailed steps that I tried until now:

  "plugins": [
    "cypress"
  ],
  "env": {
    "cypress/globals": true
  },

import '@cypress/code-coverage/support';

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  require('@cypress/code-coverage/task')(on, config);

  // It's IMPORTANT to return the config object
  // with any changed environment variables
  return config;
};

Now for the errors I got from the above step:

module.exports = changed to export default

(on, config) changed to:

(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
)

Changed require('@cypress/code-coverage/task')(on, config); to import('@cypress/code-coverage/task')(on, config);

This is the part where I'm stuck now and don't know how to handle this error:

Could not find a declaration file for module '@cypress/code-coverage/task'. 'c:/repo/test-app/frontend/node_modules/@cypress/code-coverage/task.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/cypress__code-coverage` if it exists or add a new declaration (.d.ts) file containing `declare module '@cypress/code-coverage/task';`ts(7016)

Please help me resolve the above issue.

Upvotes: 4

Views: 1471

Answers (1)

ackuser
ackuser

Reputation: 5889

you can see that @cypress/code-coverage is all in js

$ ls node_modules/@cypress/code-coverage/
    common-utils.js  LICENSE.md  middleware/  node_modules/  package.json  plugins.js  README.md  support.js  support-utils.js  task.js  task-utils.js  use-babelrc.js

so effectively, you should install @types/cypress__code-coverage to make your project in ts to understand this js not typed library.

Once you has installed this library you obtain how they are typed this function

npm i --save-dev @types/cypress__code-coverage

Having a look to

$ cat node_modules/@types/cypress__code-coverage/task.d.ts 
/// <reference types="cypress" />

export default function registerCodeCoverageTasks(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions): void;

Finally, you change in your

cypress.config.ts

import * as registerCodeCoverageTasks from '@cypress/code-coverage/task';

that wasn't working for this

import registerCodeCoverageTasks from '@cypress/code-coverage/task';

and there should be everything ready to compile.

Hope this help you :)

Upvotes: 0

Related Questions