Enzyme 是 React 组件的 JavaScript 测试实用工具，它方便了我们测试组件的输出和各种操作的结果。然而，在使用 Enzyme 进行测试时，一些开发者可能会遇到 “wrapper contains unknown element” 的问题。这个问题通常发生在测试中，当组件输出了一个元素，而我们却没有提供这个元素的测试代码时就会出现这个错误。在本文中，我们将详细探讨这个问题的原因，并提供可能的解决方案。
问题原因
当我们使用 wrapper.contains() 方法时会遇到 “wrapper contains unknown element” 的错误。这是因为在我们的测试代码中没有提供我们要测试的组件输出的所有元素。这些元素可能是子组件中的元素或者是在组件上使用到的其他库里面的元素。如果我们没有相关代码对它们进行测试，Enzyme 就会认为它们是不可识别的元素并报错。
解决方案
要解决这个问题，我们需要使用 Enzyme 提供的一些方法来在测试代码中指定我们要测试的元素。下面是一些常用的方法：
1. 使用 wrapper.find() 方法
wrapper.find() 方法用于查找与选择器匹配的所有后代元素。对于子组件中的元素，我们可以使用 wrapper.find() 来查找并测试它们。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ---------------------- ---- -- -- - ---------- ------ ----- ----------- -- -- - ----- ------- - -------------------- ---- ----------------------------------------------------------- --- ---展开代码
2. 使用 wrapper.containsMatchingElement() 方法
wrapper.containsMatchingElement() 方法用于查找是否有与提供的元素匹配的元素。我们可以使用它来测试组件输出的元素是否存在。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ---------------------- ---- -- -- - ---------- ------ -------- --------- -- -- - ----- ------- - -------------------- ---- ------------------------------------------- -------------------- ---------------- --- ---展开代码
3. 使用 wrapper.matchesElement() 方法
wrapper.matchesElement() 方法用于检查包装器是否匹配给定的元素。我们可以使用它来测试组件输出的元素是否正确。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ---------------------- ---- -- -- - ---------- ------ -------- ------- ---- ------- ------ -- -- - ----- ------- - -------------------- ---- ---------------------------------------------------- -------------------------- -------------------------- --- ---展开代码
结论
“wrapper contains unknown element” 是一个常见的错误，通常在测试中出现。这个错误通常是由于测试代码缺少对组件输出的所有元素的测试而引起的。为了解决这个问题，我们可以使用 Enzyme 提供的一些方法来指定要测试的元素。在编写测试代码时，我们需要对组件的输出进行充分检查，以确保我们发现并测试所有相关元素，从而最大化测试覆盖并减少错误的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771d13b6d66e0f9aad22a8e
