简介
@mzgoddard/jest-webpack 是一款基于 Jest 和 webpack 的测试工具。它能让你在测试环境下快速 import、require 模块，并且可以自动 mock 你的 webpack 配置。
在本篇文章中，我们将会介绍如何使用 @mzgoddard/jest-webpack 来为你的前端项目编写自动化测试用例。
安装
需要使用 npm 5 或以上版本，以及 Node.js 8.10 或以上版本。然后，可以通过如下命令行安装：
npm i -D @mzgoddard/jest-webpack
配置
Jest 配置
在使用 @mzgoddard/jest-webpack 之前，我们需要先配置 Jest。
在 package.json 中加入如下配置：
{
"jest": {
"testEnvironment": "node",
}
}webpack 配置
为了让 @mzgoddard/jest-webpack 能够正常运行，还需要在 webpack 配置中加入如下代码：
-- -------------------- ---- ------- ----- ------------- - ---------------------------------- ----- ------ - - -- --- ------- ------- ---------- ------------------ -- --- -- -------------- - -------
这样，我们就将 node 的 built-in 模块和第三方依赖库排除在了外，只打包我们自己写的代码。
接着，我们需要修改 Jest 的 moduleNameMapper 配置：
{
"jest": {
"moduleNameMapper": {
"^src/(.*)$": "<rootDir>/src/$1"
}
}
}这样做的目的是，当 Jest 遇到被 import 或 require 的模块路径中含有 src/ 的时候，会将其映射到项目源代码中的目录。
@mzgoddard/jest-webpack 配置
我们还需要在 Jest 的配置中加入如下代码：
{
"jest": {
"globalSetup": "<rootDir>/node_modules/@mzgoddard/jest-webpack/global-setup.js",
"globalTeardown": "<rootDir>/node_modules/@mzgoddard/jest-webpack/global-teardown.js",
"preset": "ts-jest"
}
}其中，globalSetup 和 globalTeardown 分别对应全局的初始化和销毁脚本，比如在测试之前，首先需要启动 webpack 服务等等。而 preset 决定了我们使用的测试框架是否支持 Typescript。
小试牛刀
安装完毕并配置好后，我们可以来运行一个测试：
// test/flash.spec.js
const { flash } = require('src/util/flash');
it('should flash', () => {
expect(flash('hello, world!')).toBe(true);
});// src/util/flash.js
export function flash(message) {
console.log(`Flashing message: ${message}`);
return true;
}然后，在命令行中执行：
npm test
此时，你应该能看到控制台输出 Flashing message: hello, world! 并通过测试。
总结
@mzgoddard/jest-webpack 这个工具可以为我们提供更加方便和快捷的开发体验。而掌握它的 usage 也成为了一种必备的技能。
在实际的生产环境中，我们要结合项目的具体情况去使用这个工具，也要时刻关注其各项配置参数变化，以保证测试的结果准确无误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacf7