Add documentation on typescript (+webpack) support
ericorruption opened this issue ยท 13 comments
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.
@bahmutov suggestions?
It would be great to have some documentation on this as I was unsuccessful getting coverage with typescript.
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.
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.
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 )
@jennifer-shehane I'm happy to open a PR adding documentation on how to get it working with TS ๐๐ป
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
@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 ๐
@bahmutov as promised โค๏ธ
https://github.com/lluia/cypress-typescript-coverage-example
Thank you @lluia I will refer others to your repo!
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'),
);
right, @maximgeerinck - without ejecting you would need to somehow get your settings into webpack config
๐ This issue has been resolved in version 1.6.3 ๐
The release is available on:
Your semantic-release bot ๐ฆ๐