NYC report empty with babel 7

tomasruizr commented 5 years ago

Hello, Im running into a problem of empty reports after upgrading babel 7, It was ok before.

What am I missing? Thanks In advance.

here's my config

command: NODE_ENV=test nyc --reporter=lcov --reporter=text mocha-webpack --reporter spec --webpack-config webpack.config.test.js \"src/**/*.test.js\" --interactive false

babel.rc

{
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  },
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-modules-commonjs", {
       "noMangle": true
    }]
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

webpack.config.test.js

{
    "mode": "development",
    "devtool": "inline-cheap-module-source-map",
    "entry": ["/Users/tomas.ruiz/Study/trade-manager-config-fe/src/index"],
    "target": "web",
    "output": {
        "path": "/Users/tomas.ruiz/Study/trade-manager-config-fe/src",
        "publicPath": "/",
        "filename": "bundle.js",
        "devtoolModuleFilenameTemplate": "[absolute-resource-path]",
        "devtoolFallbackModuleFilenameTemplate": "[absolute-resource-path]?[hash]"
    },
    "resolve": {
        "alias": {
            "vue$": "vue/dist/vue.esm.js",
            "@": "/Users/tomas.ruiz/Study/trade-manager-config-fe/src"
        }
    },
    "plugins": [{
        "options": {
            "template": "src/index.html",
            "filename": "index.html",
            "hash": false,
            "inject": true,
            "compile": true,
            "favicon": false,
            "minify": false,
            "cache": true,
            "showErrors": true,
            "chunks": "all",
            "excludeChunks": [],
            "chunksSortMode": "auto",
            "meta": {},
            "title": "Webpack App",
            "xhtml": false
        }
    }, {}],
    "module": {
        "rules": [{
                "test": /\.js$/,
                "include": "/Users/tomas.ruiz/Study/trade-manager-config-fe/src",
                "loader": "istanbul-instrumenter-loader"
            }, {
                "test": /\.css$/,
                "use": ["vue-style-loader", "css-loader"]
            },
            {
                "test": /\.scss$/,
                "use": ["vue-style-loader", "css-loader", "sass-loader"]
            },
            {
                "test": /\.sass$/,
                "use": ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
            },
            {
                "test": /\.js$/,
                "loader": "babel-loader",
                "exclude": /node_modules/
            },
            {
                "test": /\.(png|jpg|gif|svg)$/,
                "loader": "file-loader",
                "options": {
                    "name": "[name].[ext]?[hash]"
                }
            },
            {
                "test": /\.vue$/,
                "loader": "vue-loader",
                "options": {
                    "name": "[name].[ext]?[hash]"
                }
            }, {
                "test": {},
                "loader": "vue-loader",
                "options": {
                    "loaders": {
                        "scss": ["vue-style-loader", "css-loader", "sass-loader"],
                        "sass": ["vue-style-loader", "css-loader", "sass-loader?indentedSyntax"]
                    }
                }
            }
        ]
    },
    "externals": [null],
    "optimization": {
        "nodeEnv": "test"
    }
}

Dev Dependencies

"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0",
    "@vue/test-utils": "^1.0.0-beta.28",
    "babel-loader": "^8.0.5",
    "babel-plugin-istanbul": "^5.1.0",
    "chai": "^4.2.0",
    "chalk": "^2.4.2",
    "cheerio": "^1.0.0-rc.2",
    "compression": "^1.7.3",
    "css-loader": "^2.1.0",
    "eslint": "^5.12.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-watch": "^4.0.2",
    "express": "^4.16.4",
    "fetch-mock": "^7.3.0",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-fetch": "^2.2.1",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jsdom": "^13.1.0",
    "jsdom-global": "^3.0.2",
    "json-schema-faker": "^0.5.0-rc16",
    "json-server": "^0.14.2",
    "localtunnel": "^1.9.1",
    "mini-css-extract-plugin": "^0.5.0",
    "mocha": "^5.2.0",
    "mocha-webpack": "^2.0.0-beta.0",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "nyc": "^13.1.0",
    "open": "0.0.5",
    "rimraf": "^2.6.3",
    "sass-loader": "^7.1.0",
    "sinon": "^7.2.2",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.5.1",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-dev-middleware": "^3.5.0",
    "webpack-md5-hash": "0.0.6",
    "webpack-node-externals": "^1.7.2"
  }

imsasa commented 5 years ago

it work well when I remove "env": { "test": { "plugins": ["istanbul"] } }, and 'NODE_ENV=test '

tomasruizr commented 5 years ago

Thanks for the quick response... Tried what you proposed but no luck yet. Still empty reports

imsasa commented 5 years ago

Thanks for the quick response... Tried what you proposed but no luck yet. Still empty reports

So sorry that couldn't help you. In my project , if use nyc, no need use webpack.

modify package.json ,add nyc in

"nyc": {
"reporter": [
  "text-summary",
  "html"
],
"require": [
  "@babel/register"
],
"extension": [
  ".js"
],
"cache": true,
"temp-dir": "./dist/tests/.nyc-temp",
"report-dir": "./dist/tests/nyc"
}

2.modify package.json , add "test": "nyc mocha --ui bdd ./tests/field.js" in scripts prop;

exec run test

tomasruizr commented 5 years ago

Great THANKS! We are getting somewhere... With the config you propose now its instrumenting the js files... YAY!!!!

But the thing is I need to instrument Vue files too. So I went Back to my original configuration and remove the module.rules -> include in the istanbul loader configuration for the webpack.config.test.js file and got the same result, but still no Vue files instrumentation.

The weird thing is that the same config prior babel update worked as expected.

Any suggestions?

imsasa commented 5 years ago

@tomasruizr my config

package.json

{
 "scripts"        : {
    "test:nyc"  : "cross-env NODE_ENV=test nyc mocha --ui bdd ./tests/**.js"
  },
  "dependencies"   : {
    "@babel/register"    : "^7.0.0",
    "mockjs"             : "^1.0.1-beta3",
    "regenerator-runtime": "^0.13.1",
    "vue"                : "^2.5.21"
  },
  "devDependencies": {
    "@babel/core"                 : "^7.2.2",
    "@babel/preset-env"           : "^7.2.3",
    "babel-loader"                : "^8.0.5",
    "babel-plugin-istanbul"       : "^5.1.0",
    "babel-register"              : "^6.26.0",
    "chai"                        : "^4.2.0",
    "cross-env"                   : "^5.2.0",
    "eslint"                      : "^5.12.0",
    "istanbul"                    : "^0.4.5",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jsdoc"                       : "^3.5.5",
    "jsdom"                       : "^13.1.0",
    "mocha"                       : "^4.0.1",
    "nyc"                         : "^13.1.0",
    "webpack"                     : "^4.28.4"
  }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "env": {
    "test": {
      "plugins": [
        "istanbul"
      ]
    }
  }
}

gugu commented 5 years ago

I found that the problem is in using webpack's module aliases. When I changed it to babel module alias plugin, it worked

tomasruizr commented 5 years ago

Hey @gugu Great to hear that!, I'll be looking into it. Thanks!

deleonio commented 5 years ago

Hey guy's, I think the problem is on a other site.

Set in your nyc-config in the package.json the cache-attribute of false.

"nyc": {
  "cache": false
},

or use the --cache false flag

bcoe commented 5 years ago

@tomasruizr still bumping into issues? if you can provide a minimal reproduction it might help folks dig into the issue a bit more -- I haven't done played much with Vue, so don't quite know where to start.

tomasruizr commented 5 years ago

Thanks for the interest @bcoe , I've been a bit over the top with the deadlines of the project so I temporarily downgrade the babel version and have been snoozing the upgrade since. I Will find the time to attempt the upgrade between this week and the next. I'll let you know how it goes. Thanks again.

jasonk commented 5 years ago

After fighting with this for a while I finally found what was causing it for me, which looks like it might be the same issue you are having.

All of the documentation and examples show running nyc something like this:

cross-env NODE_ENV=test nyc mocha

With configuration in your .babelrc that includes:

env: {
  test: {
    plugins: [ 'istanbul' ],
  }
}

Which I see is what you are doing, and this all works great for most people. However, when determining which env sections to use from your .babelrc, NODE_ENV is the fourth thing that babel checks. When determining the env to use, babel looks at:

If it was invoked with --env-name=<name>
If the configuration includes envName: "<name>"
The contents of process.env.BABEL_ENV
The contents of process.env.NODE_ENV

So basically the recommended configuration will work just fine if your environment doesn't contain $BABEL_ENV, but if it does (and it's set to anything other than test) then that configuration will just report Unknown for everything, because nothing actually got instrumented.

So, in my case I was having this problem:

$ nyc mocha
...
=============================== Coverage summary ===============================
Statements   : Unknown% ( 0/0 )
Branches     : Unknown% ( 0/0 )
Functions    : Unknown% ( 0/0 )
Lines        : Unknown% ( 0/0 )
================================================================================

And it was all caused by this:

$ echo $NODE_ENV
test
$ echo $BABEL_ENV
development

Just making sure that BABEL_ENV was either also set to the right value, or else cleared entirely fixed the problem for me:

$ BABEL_ENV= nyc mocha
...
=============================== Coverage summary ===============================
Statements   : 41.62% ( 2442/5867 )
Branches     : 30.84% ( 847/2746 )
Functions    : 35% ( 531/1517 )
Lines        : 42.96% ( 2275/5296 )
================================================================================

I'm using babel.config.js rather than .babelrc, which gives you a lot more flexibility than JSON does. So what I ended up doing to fix it was just not using the env : { test : { plugins : [ 'istanbul' ] } } and instead I added something like this to my configuration function:

  const { NODE_ENV, BABEL_ENV, NYC_ROOT_ID } = process.env;

  if ( NODE_ENV && BABEL_ENV && NODE_ENV !== BABEL_ENV ) {
    console.warn( `WARNING: Both BABEL_ENV and NODE_ENV are set in` );
    console.warn( `WARNING: the environment, but with different values.` );
    console.warn( `WARNING: BABEL_ENV = ${BABEL_ENV}` );
    console.warn( `WARNING: NODE_ENV = ${NODE_ENV}` );
  }

  const isCoverage = ( NODE_ENV === 'test' || BABEL_ENV === 'test' || NYC_ROOT_ID );

  const plugins = [
    isCoverage && 'babel-plugin-instanbul',
    // ... all my other plugins here
  ].filter( Boolean );

  return { presets, plugins };

coreyfarrell commented 5 years ago

Have you determined what was setting BABEL_ENV and why? Maybe "mode": "development" in your webpack config?

jasonk commented 5 years ago

It was set in the environment where my app was running. It wasn't that something unexpected was setting it, basically my .env file included both:

NODE_ENV=development
BABEL_ENV=development

but then when running tests, only NODE_ENV was getting set to test. Just taking BABEL_ENV out of the environment fixed the problem,

catamphetamine commented 2 years ago

In my case, the reason was that NODE_ENV wasn't set to the env stage name that was configured with babel-plugin-istanbul in babel.config.js.

istanbuljs / babel-plugin-istanbul

NYC report empty with babel 7 #190