简介
@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