Cove coverage isn’t working for TS and Cra-v3

[taninnazar]

We have been created our React app (components library for storyBook) with cra-v3. Currently we are using TypeScript, and our components are in .tsx files. We don’t have any webpack or babel file to modify it. I already checked all your examples but have never seen something working for typescript and cypress unit testing where code coverage is collecting without going to some url. As a result I’m getting an empty nyc_out file.
If it's possible to do, please, add here - https://github.com/bahmutov/try-cra-app-typescript
P.S. we are migrating to cypress from jest + enzyme. And for jest coverage is working for same project.(same Istanbul tool)

Tools:
Cypress 4.7.0
Cypress-react-unit-test 4.3.0
Os: Windows 10

[taninnazar]

Just cloned your repo and run yarn cypress open but code coverage is also not working
https://github.com/bahmutov/try-cra-app-typescript

[bahmutov]

It is weird, and that project has code coverage by default https://github.com/bahmutov/try-cra-app-typescript#code-coverage At least on Mac and Linux it works, I even added a check on CI.

Could you run that project with verbose debug logs as described and see if there is an obvious error somewhere? Or paste the logs somewhere?

[taninnazar]

[taninnazar]

[bahmutov]

See how it is searching through oneOf list of loaders to find Babel loader and cannot find it? On my machine it does find it:

DEBUG=cypress-react-unit-test,find-webpack yarn cypress run
...
  find-webpack setting new list of globals with cy and Cypress +0ms
  find-webpack trying to add code instrumentation plugin +0ms
  find-webpack webpackOptions.module { strictExportPresence: true, rules: [ { parser: [Object] }, { test: /\.(js|mjs|jsx|ts|tsx)$/, enforce: 'pre', use: [Array], include: '/Users/gleb/git/try-cra-app-typescript/src' }, { oneOf: [Array] } ] } +0ms
  find-webpack looking through oneOf rules +0ms
  find-webpack babel rule { test: /\.(js|mjs|jsx|ts|tsx)$/, include: [ '/Users/gleb/git/try-cra-app-typescript/src', '/Users/gleb/git/try-cra-app-typescript/src' ], loader: '/Users/gleb/git/try-cra-app-typescript/node_modules/babel-loader/lib/index.js', options: { customize: '/Users/gleb/git/try-cra-app-typescript/node_modules/babel-preset-react-app/webpack-overrides.js', babelrc: false, configFile: false, presets: [ '/Users/gleb/git/try-cra-app-typescript/node_modules/babel-preset-react-app/index.js' ], cacheIdentifier: 'development:babel-plugin-named-asset-import@0.3.6:babel-preset-react-app@9.1.2:react-dev-utils@10.2.1:react-scripts@3.4.1', plugins: [ [Array] ], cacheDirectory: true, cacheCompression: false, compact: false } } +0ms
  find-webpack added babel-plugin-istanbul +0ms

Can I ask you to run one more time, and enable just find-webpack logs because that's where the problem is, and this time with more depth

DEBUG=find-webpack DEBUG_DEPTH=10 yarn cypress run

This will print the entire webpack config so we can see why this check does not find the Babel loader that is supposed to be there

  debug('looking through oneOf rules')
  const babelRule = oneOfRule.oneOf.find(
    (rule) => rule.loader && rule.loader.includes('/babel-loader/'),
  )
  return babelRule

Should be something like this

[taninnazar]

[bahmutov]

Hmm, somehow it does not print the full module object, so I don't see the inside of the webpackOptions.module message. And look there is an open issue about DEBUG_DEPTH not working debug-js/debug#746 sigh

ok, can you edit your local node_modules/find-webpack/src/clean-for-cypress.js file and change the function to print more debug messages

Instead of this function

const findBabelRule = (webpackOptions) => {
  if (!webpackOptions) {
    return
  }
  if (!webpackOptions.module) {
    return
  }
  debug('webpackOptions.module %o', webpackOptions.module)
  if (!Array.isArray(webpackOptions.module.rules)) {
    return
  }
  const oneOfRule = webpackOptions.module.rules.find((rule) =>
    Array.isArray(rule.oneOf),
  )
  if (!oneOfRule) {
    debug('could not find oneOfRule')
    return
  }
  debug('looking through oneOf rules')
  const babelRule = oneOfRule.oneOf.find(
    (rule) => rule.loader && rule.loader.includes('/babel-loader/'),
  )
  return babelRule
}

overwrite it to

const findBabelRule = (webpackOptions) => {
  if (!webpackOptions) {
    return
  }
  if (!webpackOptions.module) {
    return
  }
  debug('webpackOptions.module %o', webpackOptions.module)
  if (!Array.isArray(webpackOptions.module.rules)) {
    return
  }
  const oneOfRule = webpackOptions.module.rules.find((rule) =>
    Array.isArray(rule.oneOf),
  )
  if (!oneOfRule) {
    debug('could not find oneOfRule')
    return
  }
  debug('looking through oneOf rules')
  debug('oneOfRule.oneOf %o', oneOfRule.oneOf)
  oneOfRule.oneOf.forEach(rule => debug('rule %o', rule))

  const babelRule = oneOfRule.oneOf.find(
    (rule) => rule.loader && rule.loader.includes('/babel-loader/'),
  )
  return babelRule
}

[taninnazar]

[bahmutov]

Uggh, I see the problem now - the check uses forward slashes!!! OMG, what a rookie mistake - thank you so much for patiently debugging this

bahmutov/find-webpack#8

[bahmutov]

Merging the fix in #259

[taninnazar]

@bahmutov thank you too, for so quick respond and fix. I can confirm that it's working now for me!

[bahmutov]

should be fixed in version v4.3.1