Add documentation on typescript (+webpack) support

[ericorruption]

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.

[jennifer-shehane]

@bahmutov suggestions?

[duncanhunter]

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

[selangley-wa]

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.

[SatorSquare]

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.

[ubbe-xyz]

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 )

[ubbe-xyz]

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

[bahmutov]

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

[ubbe-xyz]

@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 👍

[ubbe-xyz]

@bahmutov as promised ❤️
https://github.com/lluia/cypress-typescript-coverage-example

[bahmutov]

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

[maximgeerinck]

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'),
);

[bahmutov]

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

[bahmutov]

🎉 This issue has been resolved in version 1.6.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀