how to separate files for mocha-webpack

Question

What's happening is that when I run my tests, my coverage only shows bundle.js which isn't that helpful.

I have the following webpack file setup and wanted to know what I should change to make it so that each file is covered individually

webpack.config-test.js

var nodeExternals = require("webpack-node-externals")
const path = require("path")

module.exports = {
    context: path.resolve(__dirname),
    resolve: {
        extensions: [".js"],
        alias: {
            "@": path.join(__dirname, "../../src/server"),
        }
    },
    output: {
        path: "./",
        filename: "[name].js",
    },    
    target: "node", // webpack should compile node compatible code
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
}

running the command via npm:

nyc mocha-webpack --webpack-config test/server/webpack.config-test.js --glob \"*spec.js\" test/server/unit

The output currently is:

All files  |    90.38 |    70.83 |    90.91 |     90.2 |                   |
 bundle.js |    90.38 |    70.83 |    90.91 |     90.2 |... 78,280,282,306

whereas I'm expecting the output to be

All files     |       80 |    68.75 |       80 |       80 |                   |
 functions.js |    78.79 |    68.75 |       80 |    78.79 |... 59,60,62,64,88 |
 mixin.js     |      100 |      100 |      100 |      100 | 

In the non mocha-webpack version, I also added the filename to each test, and I would like that to also happen in the webpack version. So without webpack, I run on an index.js, i.e.

index.js

const fs = require("fs")
const path = require("path")

const files = fs.readdirSync(__dirname)
files.forEach(file => 
{
    if (!file.match(/\.spec\.js$/))
        return

    console.log(file)

    describe(file, function () 
    {
        require(path.join(__dirname, file))
    })
})

which then outputs something like:

  sql.spec.js
    Some SQL tests
      ✓ should be 10

  test.spec.js
    generateRandomString
      ✓ should generate a 20 length string
      ✓ should generate a 40 length string
      ✓ should throw error for -10
      ✓ should throw error for length
    getRequiredProps
      ✓ should get prop
      ✓ should throw error
    toTime
      ✓ 1 seconds should return 1000
      ✓ 1 minutes should return 60000
      ✓ 1 hours should return 3600000
      ✓ 1 days should return 86400000

Update

There's source-mapping, but it's showing a lot more than I'd like: https://github.com/zinserjan/mocha-webpack/blob/master/docs/installation/webpack-configuration.md

------------------------------------------|----------|----------|----------|----------|-------------------|
File                                      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------------------------|----------|----------|----------|----------|-------------------|
All files                                 |     78.8 |    54.72 |    87.27 |     78.7 |                   |
 .tmp/mocha-webpack/1532582562486/webpack |    95.45 |       75 |    83.33 |    95.24 |                   |
  bootstrap 4e654663ecc955703de0          |    95.45 |       75 |    83.33 |    95.24 |                49 |
 node_modules/mocha-webpack/lib           |      100 |      100 |      100 |      100 |                   |
  entry.js                                |      100 |      100 |      100 |      100 |                   |
 src/server                               |       64 |    48.65 |       70 |       64 |                   |
  db.js                                   |    45.61 |    26.32 |    45.45 |    45.61 |... 20,122,126,138 |
  functions.js                            |    84.85 |    72.22 |      100 |    84.85 |    42,58,59,60,87 |
  mixin.js                                |      100 |      100 |      100 |      100 |                   |
  mock.js                                 |      100 |      100 |      100 |      100 |                   |
 src/server/post                          |       75 |     62.5 |      100 |       75 |                   |
  maptool.js                              |       75 |     62.5 |      100 |       75 |... 41,148,158,159 |
 test/server/unit                         |    98.33 |      100 |      100 |    98.33 |                   |
  functions.spec.js                       |    96.97 |      100 |      100 |    96.97 |                67 |
  maptool.spec.js                         |      100 |      100 |      100 |      100 |                   |
  mock.spec.js                            |      100 |      100 |      100 |      100 |                   |
  sql.spec.js                             |      100 |      100 |      100 |      100 |                   |
------------------------------------------|----------|----------|----------|----------|-------------------|

How would I reduce it so that only the files being checked are outputted?

Mccafferty

Thus is a good question but, personally, I prefer the unbundled form for many reasons. – Longdrawn

@AluanHaddad yes, I like the unbundled form, that's my intention. I just don't know how to do it with webpack. I'm sure there's a way since I'm using vue-cli which does proper code splitting and chunking and stuff that I don't fully understand lol. – Mccafferty

Webpack is a bundler by definition. Tools like RequireJS and SystemJS apply bundling as an optimization but operate in terms of individual files by default. That said I believe you may want to look at how tools like karma integrate into Webpack. – Longdrawn

yeah, karma seems to show all the file differences. But I read somewhere that you can't use Karma for node (backend). – Mccafferty

@AluanHaddad Seems like there's source mapping in built already, but I'm not sure how it's supposed to be used. See edit – Mccafferty

@AluanHaddad ah worked it out, simple addition. But I still want those filenames in my describe – Mccafferty

Answer 1

How would I reduce it so that only the files being checked are outputted?

It looks like even your spec files are not exluded from coverage report. Try to provide paths to the files that will be included in the coverage report in nyc config. In your package.json:

{
  ...
  "nyc": {
    "include": [
      "src/server/**/*.js"
    ],
    ...
   },
   ...
}

If it does not help try to instrument your code with instanbul-instrumenter-loader, provide paths for files to be covered in loader rule in your webpack config:

    module: {
      rules: [
        {
          test: /\.js$/,
          use: { loader: 'istanbul-instrumenter-loader' },
          include: path.resolve('../../src/server')
        }
      ]
}

and nyc default instrumenter should be disabled with instrument: false in nyc config.

UPDATE

As another solution if you are using Babel(and Vue) it make sense to instrument code with babel-plugin-istanbul it creates correct mapping (by the way I could not make istanbul-instrumenter-loader work with babel webpack configuration correctly).

I recommend to see vue-test-utils-mocha-webpack-example even you have no Vue dependency but use Babel.

Hope it helps.

Related resource: Code coverage for mocha-webpack

Salomo

the only part left is how do I add an extra describe before each file, i.e. test.spec.js followed by all its tests – Mccafferty

@A.Lau what is output when you run index.js instead of spec files like this nyc mocha-webpack --webpack-config test/server/webpack.config-test.js test/server/unit/index.js? – Salomo

It's already been posted above. Sorry misread. It outputs 0 tests – Mccafferty

@A.Lau I tried to get filename or preprocess test files somehow but there is now simple way to achieve what you want I think(dynamically add file names to tests). As solution you can just add describe block to each file and write file name manually, other approaches are too painful. – Salomo

another issue is that, if an error does happen, it still only references bundle.js rather than the individual file. :\ – Mccafferty

@A.Lau I updated answer with "UPDATE" section, this is the most workable configuration, but unfortunately I havn't any thoughts about your issue. However config with instanbul plagin for babel shows correct file with line on test failed, you can download repo and check. – Salomo