testing.cn

There are two ways to test web applications:

有两种方法来测试Web应用程序：

• In-browsers: You get a more realistic test, but you need some more complex infrastructure and the tests usually take longer. You can test DOM access.

• with node.js: You cannot test DOM access, but testing is usually faster.

• 浏览器端：你可得到更真实的测试，但你需要一些更复杂的基础设施，而且通常花费更长的测试时间。您可以测试DOM访问。

• node.js端：你不能测试DOM访问，但是测试通常更快

In-browser testing

在浏览器测试

mocha-loader

The mocha-loader executes your code with the mocha framework. If you run the code it'll show the results in the web page.

mocha-loader使用mocha框架执行你的代码。如果在页面运行生成的代码，结果会展示在页面上。

Hint: when using ! in the bash command line, you must escape it by prepending a \

提示：当在bash命令行使用!时，必须在前面加上一个\进行转义

webpack 'mocha!./test.js' testBundle.js
# index.html is a HTML page which loads testBundle.js
open index.html

webpack-dev-server

The webpack-dev-server will automatically create a HTML page which loads the script. It also re-executes the tests when files have changed.

webpack-dev-server会自动创建一个加载对应脚本的HTML页面。当文件改变时它还会重新执行测试。

webpack-dev-server 'mocha!./test.js' --hot --inline --output-filename test.js
open http://localhost:8080/test

Hint: Use --hot and it'll only execute tests which have changed or have changed dependencies.

注意：使用--hot，它只会执行那些更改过的或者依赖更改过的测试模块。

karma and webpack

You can use webpack with karma. Add "webpack" as preprocessor to your karma config.

你可以结合karma使用webpack。在karma配置中设置"webpack" as preprocessor

node.js testing

node.js 下测试

CommonJs only

只有CommonJs

If you write your web app only in CommonJs and don't use loaders or other webpack-specific features, you can test it in node.js. Just use a node.js testing framework, i. e. mocha.

如果你的web应用只是使用CommonJs规范编写，并没有利用到加载器或者其他webpack特性，你可以直接在node.js上测试。只需使用一个node.js的测试框架。如mocha

mocha test/*

Compile and test

编译并测试

If you use webpack-specific features it may not be possible to run the code with node.js. webpack allows to configure a target system: i. e. you can compile code so that it can run in node.js (configuration option target: "node"). Then use a node.js testing framework to run the bundle.

如果你使用了webpack的特性，那就不太可能在node.js上面运行代码了。webpack允许配置目标系统：丽茹说，你可以编译代码，因此其可以在node.js上运行（配置选项target: "node"）。然后使用一个node.js的测试框架来运行包。

webpack test.js /tmp/testBundle.js --target node
mocha /tmp/testBundle.js

Hint: You can use the null-loader for stylesheets instead of the style-loader!css-loader. style-loader doesn't work in node.js as it requires a DOM.

提示：你可以对样式表使用null-loader而不是style-loader!css-loader。style-loader不能在node.js上运行因为它需要DOM。

To make debugging tests easier, you can add source map support using node-source-map-support:

为了让调试更简单，你可以使用node-source-map-support添加sourcemap支持：

webpack test.js /tmp/testBundle.js --target node
mocha --require source-map-support/register /tmp/testBundle.js

Make sure to configure the devtool option to output the source map.

确保配置好devtool选项以输出sourcemap

enhanced-require

增强的require

TODO