zoukankan      html  css  js  c++  java
  • [Webpack 2] Use Karma for Unit Testing with Webpack

    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

  • 相关阅读:
    DELPHI 画报表 画表头 stringgrid控件
    蜂巢 Thinking in Agile 我们需要怎样的软件过程(1)
    小博一周年了 将开源进行到底
    Windows Mobile下实现图片的3D效果
    蜂巢 Thinking in Agile 我们需要怎样的软件过程(2)
    Windows 中各种 dll 的导出功能
    以下代码中的两个sizeof用法有问题吗?
    sizeof和strlen
    以下反向遍历array数组的方法有什么错误?
    找错题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5622057.html
Copyright © 2011-2022 走看看