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

  • 相关阅读:
    Executing a system tool
    arcengine帮助http://help.arcgis.com/en/sdk/10.0/arcobjects_net/conceptualhelp/index.html#/what_s_new_for_developers_at_10_/0001000002zp000000/
    Arcgis10.2中复制后粘贴图标是灰色的,无法粘贴,编辑也打开了,如何解决?
    VB.net X86设置
    elasticsearch5.5.2安装
    破解极验(geetest)验证码
    solidity代码
    2017年保荐代表人胜任能力考试辅导教材 投资银行业务
    投资银行业务过关必做1500题
    《一站到底》题库及答案
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5622057.html
Copyright © 2011-2022 走看看