https://github.com/codymikol/karma-webpack
Karma webpack Middleware
https://github.com/codymikol/karma-webpack
karma webpack-plugin
Last synced: 4 months ago
JSON representation
Karma webpack Middleware
- Host: GitHub
- URL: https://github.com/codymikol/karma-webpack
- Owner: codymikol
- License: mit
- Created: 2014-01-05T00:10:21.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2024-08-31T01:47:24.000Z (about 1 year ago)
- Last Synced: 2025-06-01T11:35:05.723Z (5 months ago)
- Topics: karma, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 2.51 MB
- Stars: 828
- Watchers: 22
- Forks: 219
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![coverage][cover]][cover-url]
Karma Webpack
Use webpack to preprocess files in karma
Install
npm `npm i -D karma-webpack`
yarn `yarn add -D karma-webpack`
Usage
**karma.conf.js**
```js
module.exports = (config) => {
config.set({
// ... normal karma configuration
// make sure to include webpack as a framework
frameworks: ['mocha', 'webpack'],
plugins: [
'karma-webpack',
'karma-mocha',
],
files: [
// all files ending in ".test.js"
// !!! use watched: false as we use webpacks watch
{ pattern: 'test/**/*.test.js', watched: false }
],
preprocessors: {
// add webpack as preprocessor
'test/**/*.test.js': [ 'webpack' ]
},
webpack: {
// karma watches the test entry points
// Do NOT specify the entry option
// webpack watches dependencies
// webpack configuration
},
});
}
```
### Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
```js
const defaultWebpackOptions = {
mode: 'development',
output: {
filename: '[name].js',
path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
},
stats: {
modules: false,
colors: true,
},
watch: false,
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
minSize: 0,
cacheGroups: {
commons: {
name: 'commons',
chunks: 'initial',
minChunks: 1,
},
},
},
},
plugins: [],
};
```
### How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during `autoWatch=true`.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
### Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by setting `webpack.transformPath`
```js
// this is the by default applied transformPath
webpack: {
transformPath: (filepath) => {
// force *.js files by default
const info = path.parse(filepath);
return `${path.join(info.dir, info.name)}.js`;
},
},
```
### `Source Maps`
You can use the `karma-sourcemap-loader` to get the source maps generated for your test bundle.
```bash
npm i -D karma-sourcemap-loader
```
And then add it to your preprocessors.
**karma.conf.js**
```js
preprocessors: {
'test/test_index.js': [ 'webpack', 'sourcemap' ]
}
```
And tell `webpack` to generate sourcemaps.
**webpack.config.js**
```js
webpack: {
// ...
devtool: 'inline-source-map'
}
```
Current Maintainers
Previous Maintainers
Previous maintainers of the `karma-webpack` plugin that have done such amazing work to get it to where it is today.
Ryan Clark
April Arcus
Mika Kalathil
Joshua Wiens
Will Farley
Daniela Valero
Jonathan Trang
Carlos Morales
[npm]: https://img.shields.io/npm/v/karma-webpack.svg
[npm-url]: https://npmjs.com/package/karma-webpack
[node]: https://img.shields.io/node/v/karma-webpack.svg
[node-url]: https://nodejs.org
[cover]: https://codecov.io/gh/webpack-contrib/karma-webpack/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/karma-webpack
