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