Enzyme 测试报错 Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components
在使用 Enzyme 进行 React 组件测试时，你可能会遇到这样一个错误信息：
--------- ---------- -------------------- --------- ------- --------- ----- ---- ---- ------ ----------- --- --- -------- ------- ---- --- ------
这个错误信息告诉我们，Enzyme 只能用于测试自定义组件，而不能用于测试原生 HTML 元素（例如 div、span 等）。这是因为 Enzyme 的设计初衷是用于测试 React 组件的，而不是 HTML 元素。
那么，如何解决这个问题呢？有两种方法：
- 使用 mount 替代 shallow
Enzyme 提供了两种渲染方式：shallow 和 mount。其中，shallow 只会渲染组件本身，而不会渲染其子组件；而 mount 则会递归渲染组件及其子组件。因此，如果你想测试一个包含原生 HTML 元素的组件，可以考虑使用 mount 替代 shallow。
示例代码：
------ ----- ---- --------
------ - ----- - ---- ---------
----------------------- -- -- -
---------- ------ - ----- -- -- -
----- ------- - ------------------ ----
-------------------------------------------
---
---- 将 HTML 元素包装成自定义组件
如果你不想使用 mount，也可以将 HTML 元素包装成自定义组件，然后再使用 shallow 进行测试。这样做的好处是可以避免递归渲染，提高测试效率。
示例代码：
------ ----- ---- --------
------ - ------- - ---- ---------
----- ----- - ------- -- ---- ---------- ---
----------------------- -- -- -
---------- ------ - ----- -- -- -
----- ------- - --------------------------- ------------------
-------------------------------------------
---
---总结
在使用 Enzyme 进行 React 组件测试时，如果遇到 Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was \div`.` 这样的错误信息，可以考虑使用 mount 替代 shallow，或者将 HTML 元素包装成自定义组件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66418770d3423812e4f861e9