Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blaugold/webpack-mocha-plugin
Webpack plugin integration with mocha testing framework + coverage with istanbul.
https://github.com/blaugold/webpack-mocha-plugin
coverage istanbul mocha webpack-plugin
Last synced: 3 months ago
JSON representation
Webpack plugin integration with mocha testing framework + coverage with istanbul.
- Host: GitHub
- URL: https://github.com/blaugold/webpack-mocha-plugin
- Owner: blaugold
- Created: 2016-11-12T01:39:30.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-19T21:37:34.000Z (almost 7 years ago)
- Last Synced: 2024-10-03T07:21:48.896Z (4 months ago)
- Topics: coverage, istanbul, mocha, webpack-plugin
- Language: TypeScript
- Size: 48.8 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
## webpack-mocha-plugin
Webpack plugin integration with mocha testing framework + coverage with istanbul.
[](https://circleci.com/gh/blaugold/webpack-mocha-plugin/tree/master)
## Installation
```bash
npm i -D webpack-mocha-plugin mocha istanbul remap-istanbul
```
### Webpack Config
This webpack configuration will run your tests and write a html and json coverage report to
`coverage`, after webpack compiles the project. If webpack is in watch mode tests are run after
each compilation.
You can configure entry and output how ever you like. The plugin will add all generated files
ending in `.js` to the mocha test.
```javascript
const WebpackMochaPlugin = require('webpack-mocha-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'node',
entry: {
test: __dirname + '/test.bundle.ts'
},
output: {
path: '.tmp/test',
filename: '[name].bundle.js'
},
resolve: {
extensions: ['.ts', '.js']
},
externals: [nodeExternals()],
devtool: 'inline-source-map',
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map'
},
{
test: /\.ts$/,
loader: 'awesome-typescript'
},
{
enforce: 'post',
test: /\.(js|ts)$/,
// Exlude tests so they don't show up in coverage report.
exclude: /\.(spec)\.(ts|js)$/,
loader: 'sourcemap-istanbul-instrumenter',
query: {
'force-sourcemap': true
}
}
]
},
plugins: [
new WebpackMochaPlugin({
codeCoverage: true
})
],
// When using code coverage exclude the coverage report from being watched.
// Otherwise you might get an infinite loop.
watchOptions: {
ignored: /coverage/
}
};
```
## Options
```javascript
new WebpackMochaPlugin({
mocha?: any = {};
codeCoverage?: boolean = false;
coverageVariable?: string = '__coverage__';
coverageReports?: string[] = ['html', 'json'];
coverageDir?: string = 'coverage';
})
```
You can pass all options which the Mocha JS API takes in `mocha`.
`codeCoverage` enables or disables generation of a report.
`coverageVariable` is where the instrumenter puts the coverage information.
`coverageReports` takes all reporters which `istanbul` can generate.
`coverageDir` is the directory where the coverage report will be stored.
## Test Bundle
```javascript
// This will only inlcude spec files and files required by them in the coverage report.
// Tell webpack to bundle all spec files in a context.
const ctx = require.context('src', true, /\.(spec)\.js/)
// Evaluate all modules in context.
ctx.keys().map(moduleId => ctx(moduleId))
// This will include all files in the src directory so untest code shows up in the coverage
// report.
// Tell webpack to bundle all source files in a context.
const ctx = require.context('src', true, /\.js/)
// Evaluate all modules in context.
ctx.keys().map(moduleId => ctx(moduleId))
```