Support for Cypress Code Coverage Tool when using react-app-rewired

[StallionV]

We are trying to integrate Cypress Code Coverage from this link in our project. Our app was built using

• CRA
• Using react-app-rewired to support Ant Design
• With Typescript installed on top

Our current start script looks like "start": "PORT=7000 react-app-rewired start" and as recommend in the link we install the dependencies and try and change the script to "start": "PORT=7000 react-app-rewired -r @cypress/instrument-cra start" it won't work

We tried "start": "PORT=7000 react-scripts -r @cypress/instrument-cra start" but it obviously won't work.

Does react-app-rewired support the -r command ? How can we make this work?

[timarney]

Do you know where the docs are for -r (what does it do)?

I would suggest maybe digging around here to see if the value is coming in

https://github.com/timarney/react-app-rewired/blob/master/bin/index.js#L3

[dawnmist]

The -r is actually a node.js command line option to register a compiler/transformer for certain file types when it runs the original script. It's handled by node.js itself prior to calling react-scripts or react-app-rewired.

I've followed the instructions from the link provided to create an example CRA project with typescript, then added react-app-rewired to the project. The basic react welcome page is created with the expected window.__coverage__ variable being properly set/populated even when compiling through react-app-rewired. This shows that the basic react typescript project with react-app-rewired is able to be instrumented in the same way that react-scripts could be instrumented.

What I have not tested is adding AntD to the example project as well, because I'm not familiar with how to do so.

Are you able to share an example repository that matches the setup you have so I can debug further?

There's also another possibility to consider: Jest is also able to produce code coverage reports, including the same html reports on covered/uncovered lines, etc. This is done in react-app-rewired test by adding the --coverage flag to the end of the command line. The only thing with this is that the coverage will only be generated when running tests, rather than while making code changes in dev mode.

[StallionV]

Thanks for your input. So did raise the same issue with the cypress team and they have been very helpful in suggesting an alternate here. I have created a demo repo for anyone interested.

Changes needed 1st workaround - use require like this

import React from 'react'
// import { Layout, Menu, Breadcrumb } from 'antd'
import './App.less'
const { Layout, Menu, Breadcrumb } = require('antd')
const { Header, Content, Footer } = Layout

2nd workaround - following ant-design/babel-plugin-import#204

import { Layout, Menu, Breadcrumb } from 'antd/lib' also works

For both, instrument the app either using react-app-rewired -r @cypress/instrument-cra start or config-overrides.js

const { override, fixBabelImports, addLessLoader, addBabelPlugin } = require('customize-cra')
module.exports = override(
  addBabelPlugin('babel-plugin-istanbul'),
  ...

I use the addBabelPlugin method and it indeed worked.

Not sure though why we need to use require or import as ant/lib when import as 'ant' was working just fine and so was seeking to get that answer. But hopefully this helps someone in the same scenario

[timarney]

-r, --require module

https://nodejs.org/api/cli.html#cli_r_require_module