example/unit-tests-ts is not producing coverage for unit-test files

[aslamj]

Logs and screenshots

Versions
Cypress@7.1.0

Describe the bug
We are looking hard to make the cypress test-coverage for unit-tests for functionality written in TS and after trying the example/unit-tests-ts in this repo, we see that this example is still not working. Can someone work on this and make it work?

[aslamj]

@bahmutov Can u please provide a solution to this issue? Of all the work we did to replace testing framework from Jest and Selenium to Cypress last year, this is the only limitation we are stuck now. Thanks.

[Markkop]

Same here, can't find the root of the problem.

[emiljohansson]

I was able to get this working by using webpack instead of browserify and I also included and got it working in my next.js project. Hopefully this might be useful for someone else.

This ticket might be related: #361

node -v
v15.9.0

/// <reference types="cypress" />
const webpack = require('@cypress/webpack-preprocessor')
const commonOptions = {
  module: {
    rules: [{
      test: /ts$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-typescript'
            ]
          }
        }
      ]
    }]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.css']
  }
}

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
  const options = {
    webpackOptions: commonOptions,
    watchOptions: {}
  }
  on('file:preprocessor', webpack(options))

  require('../../../../task')(on, config)
  return config
}

I also cleared the presets in the babel config.

{
  "plugins": ["istanbul"],
  "presets": []
}

[jashworth]

I also managed to get this working with webpack, with a similar configuration to the one above, but I've noticed that it produces warnings in the browser, such as

even though there's no "after each" hook in my test spec.

The "after each" hook appears to come from @cypress/code-coverage (@3.9.10 in this case).

[maapteh]

@emiljohansson with your nextjs app you can better use babel.config.js else your production app ends up with istanbul wrappers :) Just pass a NODE_ENV test when executing your script, hope it helps!

module.exports = (api) => {
  api.cache(true);

  const plugins = [];

  if (process.env.NODE_ENV === 'test') {
    plugins.push('istanbul');
  }

  return {
    presets: ['next/babel'],
    plugins,
  };
};