什么是 mutation testing（变异测试）？
Mutation testing （变异测试）是一种用于衡量测试覆盖率的技术。它通过人为制造代码缺陷，再运行测试用例来确定这些缺陷是否能被检测到。使用 mutation testing 可以帮助开发人员识别测试用例是否充分覆盖了代码，以及测试用例是否准确反映了代码缺陷。Mutation testing 通常用于测试代码质量和关键路径的可靠性。
mutation-testing-elements 概述
mutation-testing-elements 是一个基于 Web Components 的 npm 包，提供了一个用于展示 mutation test 的组件。它可以显示覆盖率，以及诊断信息，让开发人员快速地了解其测试用例覆盖的情况和缺陷定位。
如何使用 mutation-testing-elements
步骤 1 - 安装 mutation-testing-elements
可以通过以下命令，在你的项目中安装 mutation-testing-elements：
npm install mutation-testing-elements --save-dev
步骤 2 - 配置测试命令
在 package.json 中添加下列脚本：
"test:mutation": "nyc npm test && mutation-test-server"
上面的这个命令使用了 nyc 和 mutation-test-server。nyc 是测试覆盖率工具，mutation-test-server 是一个用于在浏览器上显示 mutation test 的工具。 npm test 是你的测试命令。
步骤 3 - 运行测试命令
接下来运行你添加了的测试命令：
npm run test:mutation
它会生成测试报告和一个本地的服务器目录，让你可以在浏览器上查看 mutation test 结果。
步骤 4 - 在页面中展示测试结果
要在页面中展示测试结果，你需要在你的项目中的 index.html 文件中，添加 mutation-test 呈现的 web-component。
<mutation-test-report name="YourComponentName"></mutation-test-report>
将 YourComponentName 替换为你要测试的组件名称。
现在你就可以在浏览器中打开 http://localhost:8080/，查看 mutation test 报告了。
示例代码
接下来我们来看一个示例代码，展示 mutation-testing-elements 的使用方式。
-- -------------------- ---- -------
------ --- ---- --------
--------------- -- -- -
---------- ------ - ---- ---- ----- -- -- -
------------- ------------
---
---------- ------ - ---- ---- ----- -- -- -
------------- ------------
---
---------- ----- ----- ---- - -- --- - -------- -- -- -
--------- -- - ---------- -- ------------------------ --------------
---
---------- ----- ----- ---- - -- --- - -------- -- -- -
--------- -- - ------ ------ ------------------------ --------------
---
---上面的代码是一个简单的测试代码，测试了一个 sum 函数的四个场景。接下来我们运行 mutation test，来看测试用例是否足够覆盖了代码：
npm run test:mutation
命令行输出：
... All 8 mutations survived! (133.33%) Mutants: 8 Killed: 0 (0%) Survived: 8 (100%) Timeout: 0 (0%) Ran all test suites.
我们可以看到，该代码的默认 setup 是所有变异体都被测试用例杀死。也就是说，我们的测试用例没有很好地覆盖到这个项目中所有的缺陷类型。而且，这个项目中应该有 7 个变异体，但是我们只能识别到其中 4 个，说明我们只覆盖了其中的 57.1%。
为了更新和维护这个测试套件，我们可以使用 mutation-testing-elements 来更轻松地查看测试结果。
只需要在引用新 CSS 后，就可以在浏览器中结束测试，并查看 mutation test 报告了。
-- -------------------- ---- -------
--------- -----
------
------
---
----- ---------------- ------------------------------------------------------------- --
-------
------
---
--------------------- ----------------------------------
------- ------------- --------------------------------------------------------------------------------------------
-------
-------最后，打开浏览器，你就会看到 mutation test 的结果了。
总结
Mutation testing（变异测试）是一种有用的测试技术，可以帮助开发人员确保企业代码的质量。mutation-testing-elements 是一个完美的工具，可用于在浏览器中显示 mutation test，帮助开发人员识别和克服可能出现的问题。本文提供了 mutation-testing-elements 的使用过程和一个示例，方便使用者可以更好地理解和应用 mutation testing。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/181630