nyc: TSX file with JSX element can not be instrumented

Link to bug demonstration repository

My personal repo: https://github.com/yizheliu-amazon/anomaly-detection-kibana-plugin/tree/code-coverage-issue

What I have done:

1. Install dependencies of code-coverage for cypress and nyc, I did run below command:

yarn add -D @cypress/code-coverage @istanbuljs/nyc-config-typescript @testing-library/cypress nyc source-map-support ts-node istanbul-lib-coverage

2. Other than that, I made below changes in package.json with configs for nyc:

  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "report-dir": ".cypress-coverage",
    "extension": [
      ".js",
      ".ts",
      ".tsx"
    ],
    "include": [
      "public/**/*.{js,ts,tsx}"
    ],
    "exclude": [
      "**/*.test.{ts,tsx}",
      "**/__mocks__/**",
      "**/__test__/**"
    ],
    "reporter": [
      "json",
      "html"
    ]
  },

package.json: https://github.com/yizheliu-amazon/anomaly-detection-kibana-plugin/blob/code-coverage-issue/package.json

3. I run command:

yarn nyc instrument --compact false public .instrumented

I find all the .ts files are instrumented as expected, while .tsx and .js files are not instrumented at all.

Result .ts file[Instrumented]: https://github.com/yizheliu-amazon/anomaly-detection-kibana-plugin/blob/code-coverage-issue/.instrumented/hooks/useDelayedLoader.ts

Result .tsx file[Not Instrumented]: https://github.com/yizheliu-amazon/anomaly-detection-kibana-plugin/blob/code-coverage-issue/.instrumented/components/ContentPanel/ContentPanel.tsx

Result .js file[Not Instrumented]: https://github.com/yizheliu-amazon/anomaly-detection-kibana-plugin/blob/code-coverage-issue/.instrumented/app.js

Expected Behavior

All the .ts, .tsx, .js should be instrumented

Observed Behavior

None of .tsx and .js file is instrumented, while all the .ts files are instrumented as expected.

Troubleshooting steps

  • still occurring when I put cache: false in my nyc config

Environment Information

โžœ  anomaly-detection-kibana-plugin git:(code-coverage-issue) โœ— npx envinfo@latest --preset nyc
npx: installed 1 in 2.706s

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Memory: 1.37 GB / 16.00 GB
  Binaries:
    Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.21.0/bin/npm
  npmPackages:
    @babel/plugin-proposal-class-properties: ^7.5.5 => 7.10.1
    @babel/plugin-proposal-object-rest-spread: ^7.5.5 => 7.10.1
    @babel/preset-env: ^7.5.5 => 7.10.2
    @babel/preset-react: ^7.0.0 => 7.10.1
    @babel/preset-typescript: ^7.3.3 => 7.10.1
    babel-eslint: ^9.0.0 => 9.0.0
    babel-jest: ^24.8.0 => 24.9.0
    babel-polyfill: ^6.26.0 => 6.26.0
    eslint-plugin-babel: ^5.2.0 => 5.3.0
    istanbul-lib-coverage: ^3.0.0 => 3.0.0
    nyc: ^15.1.0 => 15.1.0
    source-map-support: ^0.5.19 => 0.5.19
    ts-node: ^8.10.2 => 8.10.2
    typescript: 3.0.3 => 3.0.3

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 3
  • Comments: 17

Most upvoted comments

I am having the same issue and this did not resolve it for me either. After some investigation, it seems to me that parser-plugins option in package.json is somehow ignored, as modifying the content of node_modules/@istanbuljs/nyc-config-typescript/index.js to:

'use strict';

const { parserPlugins } = require('@istanbuljs/schema').defaults.nyc;

module.exports = {
    cache: false,
    parserPlugins: parserPlugins.concat('typescript', 'jsx')
};

works.

Anyways, for now I created a small package nyc-config-tsx which is basically that. With that package installed, extending nyc-config-tsx instead of @istanbuljs/nyc-config-typescript resolved the issue for me, so perhaps it helps resolve your issue as well @yizheliu-amazon, though it would be nice if this was added directly to the official @istanbuljs/nyc-config-typescript or there was an official config like @istanbuljs/nyc-config-tsx.

@SimonDanisch I think one way you can do before this issue gets a TRUE fix is to create a new file (e.g. nyc-config.js) which has same code as the updated @istanbuljs/nyc-config-typescript/index.js. Then define your nyc configuration as below. By this way, you can manage the fix in your git repo, ๐Ÿ˜ƒ.

{
  "extends": "./nyc-config.js"
}

nyc-config.js

'use strict';
const { parserPlugins } = require('@istanbuljs/schema').defaults.nyc;
module.exports = {
  cache: false,
  parserPlugins: parserPlugins.concat('typescript', 'jsx'),
};

I am having the same issue and this did not resolve it for me either. After some investigation, it seems to me that parser-plugins option in package.json is somehow ignored, as modifying the content of node_modules/@istanbuljs/nyc-config-typescript/index.js to:

'use strict';

const { parserPlugins } = require('@istanbuljs/schema').defaults.nyc;

module.exports = {
    cache: false,
    parserPlugins: parserPlugins.concat('typescript', 'jsx')
};

works.

Anyways, for now I created a small package nyc-config-tsx which is basically that. With that package installed, extending nyc-config-tsx instead of @istanbuljs/nyc-config-typescript resolved the issue for me, so perhaps it helps resolve your issue as well @yizheliu-amazon, though it would be nice if this was added directly to the official @istanbuljs/nyc-config-typescript or there was an official config like @istanbuljs/nyc-config-tsx.

thank u very much,it works for me!!!

@loreanvictor Thanks for sharing your solution! I will try it and come back with result.

Cool. That is interesting to know. In my understanding, it is an illegal syntax to have JSX element in .ts file. Thatโ€™s why I save above change in .tsx file. Can you save the a.ts as a.tsx file and try instrumenting again?

@yizheliu-amazon

package.json

"nyc": {
    "reporter": [
      "text",
      "html"
    ],
    "parser-plugins": [
      "jsx",
      "asyncGenerators",
      "bigInt",
      "classProperties",
      "classPrivateProperties",
      "dynamicImport",
      "importMeta",
      "objectRestSpread",
      "optionalCatchBinding"
    ]
 }

a.ts

export const getEuiComponent = () => {
  return <h1>hello</h1>;
};

when i run ./node_modules/nyc/bin/nyc.js instrument a.ts

it got output

 function cov_1yccccijnu(){var path="/Users/sai/react-webpack-typescript-starter/a.ts";var hash="e76704607d8855151c5717c8891028dc31aff796";var global=new Function("return this")();var gcv="__coverage__";var coverageData={path:"/Users/sai/react-webpack-typescript-starter/a.ts",statementMap:{"0":{start:{line:1,column:31},end:{line:3,column:3}},"1":{start:{line:2,column:1},end:{line:2,column:23}}},fnMap:{"0":{name:"(anonymous_0)",decl:{start:{line:1,column:31},end:{line:1,column:32}},loc:{start:{line:1,column:37},end:{line:3,column:3}},line:1}},branchMap:{},s:{"0":0,"1":0},f:{"0":0},b:{},_coverageSchema:"1a1c01bbd47fc00a2c39e90264f33305004495a9",hash:"e76704607d8855151c5717c8891028dc31aff796"};var coverage=global[gcv]||(global[gcv]={});if(!coverage[path]||coverage[path].hash!==hash){coverage[path]=coverageData;}var actualCoverage=coverage[path];{// @ts-ignore
cov_1yccccijnu=function(){return actualCoverage;};}return actualCoverage;}cov_1yccccijnu();cov_1yccccijnu().s[0]++;export const getEuiComponent=()=>{cov_1yccccijnu().f[0]++;cov_1yccccijnu().s[1]++;return<h1>hello</h1>;};
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImEudHMiXSwibmFtZXMiOlsiZ2V0RXVpQ29tcG9uZW50Il0sIm1hcHBpbmdzIjoiczFCQWVZO21IQWZaLE1BQU8sTUFBTUEsQ0FBQUEsZUFBZSxDQUFHLElBQU0saURBQ3BDLE1BQU8sQ0FBQyxFQUFELENBQUksS0FBSyxFQUFFLEVBQUYsQ0FBaEIsQ0FDRSxDQUZJIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IGdldEV1aUNvbXBvbmVudCA9ICgpID0+IHtcblx0cmV0dXJuIDxoMT5oZWxsbzwvaDE+O1xuICB9OyJdfQ==

but when i remove config jsx it output

export const getEuiComponent = () => {
        return <h1>hello</h1>;
  };