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

  • 相关阅读:
    使用VS2013自带的PreEmptive Dotfuscator and Analytis来混淆C#代码
    jQuery发布1.9正式版,最后支持IE 6/7/8
    response的contentType的类型值Response.ContentType
    svn 切出指定版本、更改版本名称、删除分支
    js中url解码
    如何判断一个变量是否是utf-8
    mysql explain详解
    PHP Warning: date() [function.date]: It is not safe to rely on the system's timezone
    winScp上传文件时,如何过滤制定文件
    winScp如何通过隧道代理进行远程连接
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5622057.html
Copyright © 2011-2022 走看看