TSX file with JSX element can not be instrumented #1334

yizheliu-amazon · 2020-07-21T01:45:56Z

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

The text was updated successfully, but these errors were encountered:

yizheliu-amazon · 2020-07-21T01:47:21Z

Hi team, could you please help me understand if there is anything wrong wrong on my side? This is the tsconfig file: https://github.com/yizheliu-amazon/anomaly-detection-kibana-plugin/blob/development/tsconfig.json

yizheliu-amazon · 2020-07-21T05:37:37Z

Interesting finding:
public/hooks/useDelayedLoader.ts can be instrumented successfully via command yarn nyc instrument --compact false public .instrumented; if I change its name to useDelayedLoader.tsx, it can still be instrumented. However, if I add some code with JSX elements, and run same command, useDelayedLoader.tsx can not be instrumented as expected. Example code:

export const getEuiComponent = () => {
  return (
    <React.Fragment>
      <EuiText>heelp</EuiText>
    </React.Fragment>
  );
};

It looks like the JSX is causing problem here.

yizheliu-amazon · 2020-07-21T21:42:55Z

I tried with more simple JSX element below, and it still causes the same issue:

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

Looks like TSX file with JSX element can not be instrumented in my repo current configuration.

Hi team, do you have any idea on that?

sxyy · 2020-07-22T05:42:58Z

@yizheliu-amazon

try add nyc config in package.json like below
"parser-plugins": [ "jsx", "asyncGenerators", "bigInt", "classProperties", "classPrivateProperties", "dynamicImport", "importMeta", "objectRestSpread", "optionalCatchBinding" ]

yizheliu-amazon · 2020-07-22T19:58:56Z

@yizheliu-amazon

try add nyc config in package.json like below
"parser-plugins": [ "jsx", "asyncGenerators", "bigInt", "classProperties", "classPrivateProperties", "dynamicImport", "importMeta", "objectRestSpread", "optionalCatchBinding" ]

Hi @sxyy

Thanks for your help and comment. Unfortunately, using that config didn't work for me.

sxyy · 2020-07-23T05:44:30Z

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

yizheliu-amazon · 2020-07-23T05:53:37Z

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?

sxyy · 2020-07-23T05:56:38Z

same output
./node_modules/nyc/bin/nyc.js instrument a.tsx

function cov_2q2jx9jaok(){var path="/Users/sai/react-webpack-typescript-starter/a.tsx";var hash="f30e71028b5828cd0ddb4cf4d8475d28fe1a6d34";var global=new Function("return this")();var gcv="__coverage__";var coverageData={path:"/Users/sai/react-webpack-typescript-starter/a.tsx",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:"f30e71028b5828cd0ddb4cf4d8475d28fe1a6d34"};var coverage=global[gcv]||(global[gcv]={});if(!coverage[path]||coverage[path].hash!==hash){coverage[path]=coverageData;}var actualCoverage=coverage[path];{// @ts-ignore
cov_2q2jx9jaok=function(){return actualCoverage;};}return actualCoverage;}cov_2q2jx9jaok();cov_2q2jx9jaok().s[0]++;export const getEuiComponent=()=>{cov_2q2jx9jaok().f[0]++;cov_2q2jx9jaok().s[1]++;return<h1>hello</h1>;};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImEudHN4Il0sIm5hbWVzIjpbImdldEV1aUNvbXBvbmVudCJdLCJtYXBwaW5ncyI6IncxQkFlWTttSEFmWixNQUFPLE1BQU1BLENBQUFBLGVBQWUsQ0FBRyxJQUFNLGlEQUNwQyxNQUFPLENBQUMsRUFBRCxDQUFJLEtBQUssRUFBRSxFQUFGLENBQWhCLENBQ0UsQ0FGSSIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBnZXRFdWlDb21wb25lbnQgPSAoKSA9PiB7XG5cdHJldHVybiA8aDE+aGVsbG88L2gxPjtcbiAgfTsiXX0=

yizheliu-amazon · 2020-07-23T07:13:47Z

👍 Thanks for your verification. Can you share your tsconfig.json as well?

sxyy · 2020-07-23T07:15:55Z

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": ["es5", "es6", "dom"]
    },
    "include": [
        "./src/**/*"
    ],
    "awesomeTypescriptLoaderOptions": {
        "reportFiles": [
            "./src/**/*"
        ]
    }
}

yizheliu-amazon · 2020-07-24T02:41:48Z

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": ["es5", "es6", "dom"]
    },
    "include": [
        "./src/**/*"
    ],
    "awesomeTypescriptLoaderOptions": {
        "reportFiles": [
            "./src/**/*"
        ]
    }
}

Thanks again for sharing it. But it still does not work for me. Do you mind pushing this sample project to Github, so that I can download and compare it with my repo?

loreanvictor · 2020-11-11T11:27:02Z

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.

yizheliu-amazon · 2020-12-04T18:58:18Z

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

jixiang-zhang · 2020-12-22T11:08:22Z

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!!!!

SimonDanisch · 2021-01-15T14:13:24Z

Is there any update on this? We can't really have changes like this in our gitignored files ;)

ilovepumpkin · 2021-02-04T05:36:57Z

@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'),
};

stale · 2022-04-16T12:00:06Z

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

yizheliu-amazon changed the title ~~TS file can be instrumented while TSX not~~ TSX file with JSX element can not be instrumented Jul 22, 2020

stale bot added the stale label Apr 16, 2022

stale bot closed this as completed Apr 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TSX file with JSX element can not be instrumented #1334

TSX file with JSX element can not be instrumented #1334

yizheliu-amazon commented Jul 21, 2020

yizheliu-amazon commented Jul 21, 2020

yizheliu-amazon commented Jul 21, 2020

yizheliu-amazon commented Jul 21, 2020

sxyy commented Jul 22, 2020

yizheliu-amazon commented Jul 22, 2020

sxyy commented Jul 23, 2020 •

edited

Loading

yizheliu-amazon commented Jul 23, 2020 •

edited

Loading

sxyy commented Jul 23, 2020

yizheliu-amazon commented Jul 23, 2020

sxyy commented Jul 23, 2020

yizheliu-amazon commented Jul 24, 2020

loreanvictor commented Nov 11, 2020 •

edited

Loading

yizheliu-amazon commented Dec 4, 2020

jixiang-zhang commented Dec 22, 2020

SimonDanisch commented Jan 15, 2021

ilovepumpkin commented Feb 4, 2021

stale bot commented Apr 16, 2022

TSX file with JSX element can not be instrumented #1334

TSX file with JSX element can not be instrumented #1334

Comments

yizheliu-amazon commented Jul 21, 2020

Link to bug demonstration repository

What I have done:

Expected Behavior

Observed Behavior

Troubleshooting steps

Environment Information

yizheliu-amazon commented Jul 21, 2020

yizheliu-amazon commented Jul 21, 2020

yizheliu-amazon commented Jul 21, 2020

sxyy commented Jul 22, 2020

yizheliu-amazon commented Jul 22, 2020

sxyy commented Jul 23, 2020 • edited Loading

yizheliu-amazon commented Jul 23, 2020 • edited Loading

sxyy commented Jul 23, 2020

yizheliu-amazon commented Jul 23, 2020

sxyy commented Jul 23, 2020

yizheliu-amazon commented Jul 24, 2020

loreanvictor commented Nov 11, 2020 • edited Loading

yizheliu-amazon commented Dec 4, 2020

jixiang-zhang commented Dec 22, 2020

SimonDanisch commented Jan 15, 2021

ilovepumpkin commented Feb 4, 2021

stale bot commented Apr 16, 2022

sxyy commented Jul 23, 2020 •

edited

Loading

yizheliu-amazon commented Jul 23, 2020 •

edited

Loading

loreanvictor commented Nov 11, 2020 •

edited

Loading