配置环境

1. 首先根据 1 完成基本的 karma 测试环境。

2. 安装 webpack 和 webpack 使用的 loader

在最简单的情况下，我们只需要 webpack 和 webpack 的 karma 插件 karma-webpack

npm i -D webpack karma-webpack

模块化代码

webpack 是基于模块进行打包的，所以，我们的代码也应该已经采用了某种模块管理机制，比如 node 直接支持的 commonjs 模块。

这样的话，我们需要将我们的源代码和测试代码进行模块化处理。

原来的 add.js 函数处理为 commonjs 模块。直接导出函数。

function add( a, b ){    return a + b;}module.exports = add;

原来的测试用例 add.spec.js，导入我们定义的函数，然后使用这个函数进行测试。

var add = require('../../app/add.js');describe('add unit test.', function(){    it('2 + 3 = 5', function(){ var result = add(2, 3); expect( result).toBe( 5 ); }); });

创建入口文件

我们希望将源代码和测试代码通过 webpack 打包为一个文件，然后交给 karma 进行统一的测试，为了将源代码和测试代码组合在一起，我们可以创建一个 karma 的入口文件，通过它来引用我们的源代码和单元测试代码，通过 webpack 将这个文件作为打包的入口来生成最终的脚本文件，然后由 karma 将这个文件交给单元测试环境执行，获取测试的结果。

这里，我们在项目的根目录下，创建一个名为 karma-bundle.js 的入口文件，内容如下：

require('./app/add.js');require('./test/unit/add.spec.js');

注意，这里统一使用了 commonjs 包格式。

为了测试方便，我们可以创建一个 webpack 的配置文件，自己先进行打包，检查打包的结果是否正确。

创建名为 webpack.config.js 的 webpack 配置文件。内容如下。

var path = require('path');var ROOT_PATH = path.resolve(__dirname);var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { entry: "./karma-bundle.js", output: { path: BUILD_PATH, filename: 'bundle.js' }, };

这样，我们可以直接执行 webpack 来检查打包之后的结果是否正确。

配置 Karma

在 Karma 中，我们需要注意两个地方。

1. files 中，我们仅仅需要配置这个入口文件就可以了。

files: [        'karma-bundle.js'    ],

2. 这个文件并不是直接注入到测试环境中，我们需要使用 webpack 将这个文件作为入口进行打包处理，webpack 会查找这个文件依赖的内容，将所有的内容打包，最后输出一个打包文件，这个文件才是需要测试环境处理的文件。

这样的工作，我们通过预处理器进行。

preprocessors: { 'karma-bundle.js': ['webpack'] },

注意，你一定要安装了 karma-webpack 这个插件，而且必须有 webpack 。

执行测试

所有工作准备好之后，我们可以通过 karma 将整个过程统一执行了。只需要 karma start 就可以了。

> karma startHash: 8344a6c0a9b3c44a5636Version: webpack 1.12.14Time: 10mswebpack: bundle is now VALID.webpack: bundle is now INVALID.Hash: a7a4dbb23c1393742816Version: webpack 1.12.14 Time: 46ms Asset Size Chunks Chunk Names karma-bundle.js 1.88 kB 0 [emitted] karma-bundle.js chunk { 0} karma-bundle.js (karma-bundle.js) 334 bytes [rendered] [0] ./karma-bundle.js 63 bytes { 0} [built] [1] ./app/add.js 70 bytes { 0} [built] [2] ./test/unit/add.spec.js 201 bytes { 0} [built] webpack: bundle is now VALID. 23 02 2016 14:51:35.044:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 23 02 2016 14:51:35.055:INFO [launcher]: Starting browser Chrome 23 02 2016 14:51:36.697:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#S8gDNP6eDACwVLy6AAAA with id 99 231351 Chrome 47.0.2526 (Windows 7 0.0.0): Executed 1 of 1 SUCCESS (0.005 secs / 0.003 secs) PS C:\study\karmaStudy\karma2>

你可以看到处理的详细过程。

使用 NPM 命令

还可以使用 NPM 的自定义命令来完成自动化。

在 package.json 文件中，自定义 test 命令

"scripts": {    "test": "karma start"  },

现在，可以直接使用 npm test 来执行测试了。

> npm test> karma2@1.0.0 test C:\study\karmaStudy\karma2> karma start▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░Hash: 8344a6c0a9b3c44a5636Version: webpack 1.12.14 Time: 9ms webpack: bundle is now VALID. webpack: bundle is now INVALID. Hash: a7a4dbb23c1393742816 Version: webpack 1.12.14 Time: 45ms Asset Size Chunks Chunk Names karma-bundle.js 1.88 kB 0 [emitted] karma-bundle.js chunk { 0} karma-bundle.js (karma-bundle.js) 334 bytes [rendered] [0] ./karma-bundle.js 63 bytes { 0} [built] [1] ./app/add.js 70 bytes { 0} [built] [2] ./test/unit/add.spec.js 201 bytes { 0} [built] webpack: bundle is now VALID. 23 02 2016 14:53:53.371:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 23 02 2016 14:53:53.391:INFO [launcher]: Starting browser Chrome 23 02 2016 14:53:56.044:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#GAQtOyOe56YFuQ0vAAAA with id 21 030194 Chrome 47.0.2526 (Windows 7 0.0.0): Executed 1 of 1 SUCCESS (0.01 secs / 0.002 secs) ▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

总结

使用 Karma 集成 webpack 需要解决模块化问题，代码入口问题。

转载于:https://www.cnblogs.com/sxz2008/p/6591139.html

你可能感兴趣的文章