Code Coverage Part I

开水好喝2025-10-11 19:55

Use babel-plugin-istanbul to instrument code

Reference

babel-plugin-istanbul

Example by CRACO

React Code Coverage without ejecting from CRA

Steps

1.Get the front-end code repository

bash 复制代码

git clone git@github.com:EdmodoWorld/web-app.git
npm install

2.Setup local front-end environment

bash 复制代码

# 配置web-app/.env
PORT=3001
ENV=QA

REACT_APP_SKIP_ORACLE_TEST=0
SKIP_PREFLIGHT_CHECK=true
HTTPS=true

# 配置web-app/src/config/env.js
baseUrl                         : 'https://api.qa.mes1.edme.be',
clientId                        : <当前qa环境的clientId>,
bugsnagApiKey                   : '123456',

# 启动web-app正常，可访问https://localhost:3001
npm start

3.Install required plugin

bash 复制代码

npm i babel-plugin-istanbul @babel/preset-typescript @babel/preset-react babel-loader --save-dev

4.Config webpack field in file web-app/scripts/config-craco.js

bash 复制代码

// in getDevConfig function add below codes before <return webpackConfig> statement
// add istanbul to instrument code
        webpackConfig.module.rules.push({
          test: /\.(js|ts|tsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-typescript"],
              plugins: ["istanbul"]
            }
          }
        });

5.Add presets for babel config file web-app/babel.config.json

bash 复制代码

{
  "presets": ["@babel/preset-react"]
}

6.Start the web-app application

bash 复制代码

npm start

Troubleshoot

1.I can access web-app, but the window.coverage is not working in console, why the babel-plugin-istanbul is not working?

Solution: we should not use .babelrc file to add config because web-app is compiled by craco instead of babel, so we can just config in scripts/config-craco.js file

2.Failed to compile

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react)Connect your Github account to the 'presets' section of your Babel config to enable transformation.

Solution: add below content to the web-app/babel.config.json file

bash 复制代码

{
  "presets": ["@babel/preset-react"]
}