在前端开发中，测试是必不可少的一个环节。最近，我使用了一个非常有用的npm包——stryker-webpack，它可以帮助我们对我们的webpack应用程序进行自动化测试，并且可以在每个提交和合并请求之后运行。
安装
首先，我们需要在我们的项目中安装 stryker-webpack 。
npm install stryker-webpack --save-dev
配置
接下来，我们需要创建一个配置文件以指导stryker-webpack 运行测试。在你项目的根目录下创建一个名为 stryker.conf.js 的文件，并在其中添加以下内容：
-- -------------------- ---- -------
-------------- - -----------------
------------
------- ---------------- -- ---------
----------- ------- -- ----
-------------- ------- -- ----
---------- ------------ -------------- -- ----
-------- -
----------- --------------------------------- -- -------------
------- ----
--
-- --------
----- -
-- ---
-
---
-config.set() 包含了一些配置选项，例如变异代码的路径，测试运行器和测试框架。此外，swerve-webpack 还需要你提供一个指向你的webpack配置文件的路径。
运行测试
一旦我们的配置文件准备好了，我们就可以运行我们的测试了。在你的项目根目录下运行以下命令：
npx stryker run
这会启动测试运行器并自动运行测试，输出的结果会在控制台展现，我们还可以通过视觉化报告查看测试结果的覆盖率情况。
示例代码
下面是一个非常简单的示例代码：
-- -------------------- ---- -------
-- ------------
-------- ----------- -
------ ------- ----------
-
-------------- - ------
-- -----------------
----- ----- - -------------------
----------------- -- -- -
------------- -------- ---- ------ -- -- -
----- ------ - -----------------
--------------------------- -----------
---
---这是我们的源代码 hello.js 和测试代码 hello.spec.js。我们可以使用stryker-webpack 运行测试，变异代码并计算覆盖率。这可以通过以下方式完成：
-- -------------------- ---- -------
-- ---------------
-------------- - -----------------
------------
------- ----------------
----------- -------
-------------- -------
---------- ------------ ------------- --------
-------- -
----------- ---------------------------------
------- ----
--
-- --------
----- -
-- ---
------------------ -
------- -
----------- ----
--------- ----
---------- ----
------ ---
-
-
-
---
-输出文件的名称为 reports，并且会在浏览器中自动打开。
结论
通过 stryker-webpack 我们可以方便快捷地执行测试，变异代码和计算覆盖率，从而确保我们构建的应用程序总是符合我们预期的要求。希望本篇文章可以帮助你了解 stryker-webpack 的使用，从而更好地进行前端测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005738481e8991b448e9776