前言
在前端开发过程中，我们经常会使用 Jest 进行单元测试。Jest 是一个非常强大的 JavaScript 测试框架，提供了丰富的 API 和丰富的插件生态系统。@jarmee/jest-dom-custom-matchers 就是一个很实用的 Jest 包，它提供了一些自定义的 matchers，可以帮助我们更轻松地编写测试用例。
安装
在开始使用 @jarmee/jest-dom-custom-matchers 之前，需要先安装它。可以通过 npm 来安装：
npm install @jarmee/jest-dom-custom-matchers --save-dev
使用
安装完成后，在项目中引入 @jarmee/jest-dom-custom-matchers：
import "@jarmee/jest-dom-custom-matchers";
这样就可以在测试用例中使用自定义的 matchers 了。
checkSelectedValue
检查 select 元素是否选中了指定的选项。参数为一个字符串或一个数组，分别代表选中的选项或选项的列表。
示例:
-- -------------------- ---- -------
------------ ------- ------ ---- --- ----- -------- ------- -- -- -
----------------------- - -
------- ----------------
------- ---------------------- ----------
------- ---------------------- ----------
------- ---------------------- ----------
---------
--
----- ---------- - --------------------------------------
---------------- - ----------
-------------------------------------------------
---matchImageSnapshot
对比图片是否与给定的快照相同。如果图片不同，则测试将失败并生成差异报告。
示例：
test('Image snapshot should match', async () => {
document.body.innerHTML = `
<img src="https://picsum.photos/200/300" alt="random image">
`;
const imgElem = document.querySelector('img');
expect(imgElem).matchImageSnapshot();
});如果图片文件不同，则会生成一个差异报告，其类似于以下内容：
-- -------------------- ---- ------- ------ -- --- ------ --- ------- --- ------------ -------- -- ----- --------- ----------------------------------- --------- ----------------------------------- ------------ - ----------------------------------- - ----------------------------------- - ----------------------------------------
总结
通过使用 @jarmee/jest-dom-custom-matchers，我们可以更轻松地编写 Jest 测试用例，提高测试覆盖率和测试质量。使用 checkSelectedValue 和 matchImageSnapshot 这样的 matcher，能够帮助我们更方便地进行测试用例的编写。如果想要更深入地学习 Jest，可以查看 Jest 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e244371