React + Webpack + Karma + Mocha + Babel 单元测试配置

[ZoeyYoung]

安装

1. 安装 karma
2. 安装 karma cli，用于在终端使用karma npm install karma-cli -g
3. 安装 chai (或其它断言库)，chai-enzyme
4. 安装 babel-loader，用于支持JSX和ES6
5. 安装 karma-coverage
6. 安装 istanbul-instrumenter-loader
7. 安装 enzyme 用于测试React组件

通常需要安装四种类型的插件

插件类型	使用的插件	备注
frameworks	karma-mocha	用于结合使用mocha和Karma，依赖 mocha 测试框架
reporters	karma-mocha-reporter
launchers	karma-chrome-launcher、karma-phantomjs-launcher
preprocessors	karma-webpack、 karma-sourcemap-loader	用于结合使用karma和webpack(用于预处理)，依赖 webpack

npm install karma mocha chai chai-enzyme karma-mocha karma-mocha-reporter karma-chrome-launcher  webpack karma-webpack karma-sourcemap-loader karma-coverage babel-loader enzyme --save-dev

phantomjs-prebuilt?

配置

两个文件：

• karma.conf.js
• tests.webpack.js

配置文件参考 react-karma-babel-webpack-code-coverage

How to implement testing + code coverage on React with Karma, Babel, and Webpack

Configuration File 文档

[ZoeyYoung]

    files: [
      './node_modules/babel-polyfill/dist/polyfill.min.js',
      {
        pattern: 'tests.webpack.js',
        watched: false
      }
    ],

https://dimchez.com/blog/using-babel-polyfill-with-karma-webpack-and-es6/