[Webpack 2] Use Karma for Unit Testing with Webpack

Posted 2020-07-31 Answer1215

When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to integrate webpack and Karma directly together. In this lesson we’ll see how to utilize the karma-webpack plugin and reuse our existing webpack configuration to preprocess our test files with webpack.

 

karma.config.js:

const webpackEnv = {test: true}
const webpackConfig = require(‘./webpack.config‘)(webpackEnv)
const fileGlob = ‘src/js/**/*.test.js‘

module.exports = function setKarmaConfig(config) {
  config.set({
    basePath: ‘‘,
    frameworks: [‘mocha‘, ‘chai‘],
    files: [fileGlob],
    preprocessors: {
      [fileGlob]: [‘webpack‘]
    },
    webpack: webpackConfig,
    webpackMiddleware: {noInfo: true}, // no webpack output
    reporters: [‘progress‘],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: [‘Chrome‘],
    singleRun: true,
    concurrency: Infinity
  })
}

 

webpack.config.js:

const {resolve} = require(‘path‘)
module.exports = env => {
  return {
    entry: ‘./js/app.js‘,
    output: {
      filename: ‘bundle.js‘,
      path: resolve(__dirname, ‘dist‘),
      pathinfo: !env.prod,
    },
    context: resolve(__dirname, ‘src‘),
    devtool: env.prod ? ‘source-map‘ : ‘eval‘,
    bail: env.prod,
    module: {
      loaders: [
        {test: /\.js$/, loader: ‘babel!eslint‘, exclude: /node_modules/},
        {test: /\.css$/, loader: ‘style!css‘},
      ],
    },
  }
}

 

package.json:

{
  "private": true,
  "dependencies": {
    "todomvc-app-css": "2.0.4",
    "todomvc-common": "1.0.2"
  },
  "devDependencies": {
    "babel": "6.5.2",
    "babel-core": "6.8.0",
    "babel-eslint": "6.0.4",
    "babel-loader": "6.2.4",
    "babel-preset-es2015-webpack": "6.4.1",
    "babel-preset-stage-2": "6.5.0",
    "chai": "3.5.0",
    "cpy-cli": "1.0.0",
    "css-loader": "0.23.1",
    "eslint": "2.9.0",
    "eslint-config-kentcdodds": "6.2.1",
    "eslint-loader": "1.3.0",
    "ghooks": "1.2.1",
    "karma": "0.13.22",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "1.0.1",
    "karma-mocha": "1.0.1",
    "karma-webpack": "1.7.0",
    "mocha": "2.5.3",
    "npm-run-all": "1.8.0",
    "opt-cli": "1.4.2",
    "rimraf": "2.5.2",
    "style-loader": "0.13.1",
    "webpack": "2.1.0-beta.7",
    "webpack-dev-server": "2.0.0-beta",
    "webpack-validator": "2.1.0"
  },
  "config": {
    "ghooks": {
      "pre-commit": "opt --in pre-commit --exec \"npm run validate\""
    }
  },
  "scripts": {
    "test": "karma start",
    "watch:test": "npm test -- --auto-watch --no-single-run",
    "validate": "npm-run-all --parallel validate-webpack:* lint",
    "validate-webpack:dev": "webpack-validator webpack.config.js --env.dev",
    "validate-webpack:prod": "webpack-validator webpack.config.js --env.prod",
    "clean-dist": "rimraf dist",
    "copy-files": "cpy src/index.html src/favicon.ico dist",
    "clean-and-copy": "npm run clean-dist && npm run copy-files",
    "prestart": "npm run clean-and-copy",
    "start": "webpack-dev-server --env.dev --content-base dist",
    "prebuild": "npm run clean-and-copy",
    "prebuild:prod": "npm run clean-and-copy",
    "build": "webpack --env.dev",
    "build:prod": "webpack --env.prod -p",
    "lint": "eslint ."
  }
}

 

test file:

import Controller from ‘./controller‘

describe(‘controller‘, () => {
  it(‘exists‘, () => {
    expect(Controller).to.exist
  })
})

 

Github