Giters

cypress-io / code-coverage

Saves the code coverage collected during Cypress tests

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add documentation on typescript (+webpack) support

ericorruption opened this issue · comments

commented

My project is typescript + webpack based and I ran into some dead ends during setup because of that. Especially in the report generation part, nyc would always render an empty table even though the coverage file was there.

In the end I got the project running by using @istanbuljs/nyc-config-typescript and adding the suggested .nycrc file suggested in their documentation.

Hope it helps someone.

commented

@bahmutov suggestions?

commented

It would be great to have some documentation on this as I was unsuccessful getting coverage with typescript.

commented

Note that your documentation page:
https://docs.cypress.io/guides/tooling/typescript-support.html#Additional-information

suggests:

Additional information
See the excellent advice on setting Cypress using TypeScript in the TypeScript Deep Dive e-book by Basarat Syed.

We have published a utility npm module, add-typescript-to-cypress, that sets TypeScript test transpilation for you with a single command.

commented

I am also currently struggling with this. My code is instrumented and there is an out.json being generated in .nyc_output but the coverage report is a blank table as described above. I have tried the OPs suggestion to no avail. Documentation on how this is supposed to work with .ts and webpack would be excellent, as I am currently floundering.

commented

I was having the same issue.

After some investigation, I got it working by installing also babel-plugin-istanbul, @istanbuljs/nyc-config-typescript:

yarn add -D \
  babel-plugin-istanbul \
  @istanbuljs/nyc-config-typescript \
  source-map-support \
  ts-node

Then in my .babelrc:

// You want ONLY do this when building the app to be run by Cypress...
// A good approach is to control it through an environment variable:
// `if (process.env.CYPRESS_CODE_COVERAGE) plugins.push('istambul')`
plugins.push('istambul')

and on my package.json:

  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true
  },

( cc. @SatorSquare )

commented

@jennifer-shehane I'm happy to open a PR adding documentation on how to get it working with TS 👍🏻

commented

excellent @lluia this is good stuff, and I would love to have a small example repo we could clone and add it to the list here https://github.com/cypress-io/code-coverage#examples

commented

@bahmutov I believe setting a codesandbox using create-react-app to illustrate the case should be fairly easy. I'll find some time this afternoon and post it here once ready 👍

commented

Thank you @lluia I will refer others to your repo!

commented

How would this work in create-react-app? I did overwrite the webpack config to add istanbul as a plugin. But it seems like that doesn't work. Any ideas on it?

EDIT: The following seems to work,

I used a plugin called react-app-rewired to overwrite the webpack config and pushed the following plugins and presets.

const jsLoaderIndex = config.module.rules[2].oneOf.findIndex(
  r => r.test.toString().indexOf('(js|mjs|jsx|ts|tsx)') > -1,
);
config.module.rules[2].oneOf[jsLoaderIndex].options.plugins.push(
  require.resolve('babel-plugin-istanbul'),
);
config.module.rules[2].oneOf[jsLoaderIndex].options.presets.push(
  require.resolve('@babel/preset-typescript'),
);
commented

right, @maximgeerinck - without ejecting you would need to somehow get your settings into webpack config

commented

🎉 This issue has been resolved in version 1.6.3 🎉

The release is available on:

Your semantic-release bot 📦🚀