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

  • 相关阅读:
    WP8.1 UI 编程 四、图形
    分治法 全排列问题的一个Java实现
    合并排序算法时间复杂度分析
    js如何实现复制粘贴功能
    关于<meta name="applicable-device"content="pc">
    ready
    css文字强制大写输入
    关于input,button标签在苹果手机上显示阴影解决办法
    【C#】中用if判断值是否是否为空
    视频格式MP4,需要转码
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5622057.html
Copyright © 2011-2022 走看看