nyc: TSX file with JSX element can not be instrumented

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>;
  };