在前端开发中，我们使用 Jest 进行单元测试时，有时需要比较复杂对象的匹配，但 Jest 默认的 serializer 对于一些特定对象（如自定义组件）的字符串展示比较差，以至于无法正确匹配对象。因此，我们需要使用 metal-jest-serializer 这个 npm 包解决这个问题。
安装 metal-jest-serializer 包
使用以下命令在项目中安装 metal-jest-serializer 包。
npm i -D metal-jest-serializer
使用 metal-jest-serializer 包
在 Jest 的配置文件 jest.config.js 中添加以下代码。
module.exports = {
// ...
snapshotSerializers: [
'metal-jest-serializer'
],
// ...
}这样，Jest 在生成使用 .toMatchSnapshot() 方法比较结果时会使用 metal-jest-serializer 包。
深入理解 metal-jest-serializer 包
了解了 metal-jest-serializer 的基本使用方法后，我们来深入理解这个包的原理和使用注意事项。
原理
在 Jest 进行比较时，对于复杂对象，Jest 会将其转化为字符串进行比较。而对于某些特殊的复杂对象（如自定义组件），其默认的字符串展示比较不友好，导致无法正确比较，因此我们需要自定义 serializer。
metal-jest-serializer 包就是一个自定义的 serializer。它通过遍历传入的复杂对象并生成一个与其结构完全一致的 JSON 格式字符串，从而能正确地进行对象比较。
使用注意事项
使用 metal-jest-serializer 时，需要注意以下几点：
- metal-jest-serializer 的速度可能较慢，因为它需要遍历复杂对象并生成 JSON 字符串。
- metal-jest-serializer 会将传入的对象序列化为 JSON 字符串，而 JSON 本身的局限性使得它不能序列化一些可能包含函数或 undefined 等特殊类型的对象。
- metal-jest-serializer 不是万能的，对于某些特殊的复杂对象，可能仍需要自定义 serializer。
示例
下面是一个使用 metal-jest-serializer 包的示例，展示了不使用 serializer 时与使用 serializer 的比较结果。
-- -------------------- ---- ------- -- --- ---------- --------- ------------ -- -- - -------- -- -- -- --- --- -- - -- ------ -- ----- - --------------------- --- -- -- ---------- -------- ------------ -- -- - -------- -- -- -- --- --- -- - -- ------ -- ----- - --------------------- ---
不使用 serializer 的比较结果：
-- -------------------- ---- -------
------------ ---------- --- - -
------ -
---- --
---- ----- -
--
--
--
---- ------ -
---- ------
---- ------
--
-
--可以看到结果中的数组和对象并没有以可读的方式展示，这样影响了比较的结果。
使用 serializer 的比较结果：
-- -------------------- ---- -------
----------- ---------- --- - -
------ -
---- --
---- ----- -
--
--
--
---- ------ -
---- ------
---- ------
--
-
--使用了 metal-jest-serializer 后，对象的结构清晰可见，方便比较断言。
总结
本文介绍了 npm 包 metal-jest-serializer 的使用方法和原理，提供了例子来展示使用 metal-jest-serializer 的优势和注意事项。使用 metal-jest-serializer 可以解决 Jest 在比较复杂对象时出现的问题，期待本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728681e8991b448e8bd3