在前端开发中，测试是一个非常重要的环节。而 Enzyme 是 React 测试中非常常用的一个工具。然而，在使用 Enzyme 进行测试时，我们有时会遇到 “find（）未被定义” 错误，这会导致测试无法进行。本文将介绍如何解决这个问题。
问题描述
在使用 Enzyme 进行 React 组件测试时，我们可以使用 shallow() 方法来浅渲染组件，并使用 find() 方法来查找组件中的子元素。然而，在某些情况下，当我们使用 find() 方法时，会遇到以下错误：
TypeError: wrapper.find is not a function
这个错误通常会发生在以下情况下：
- 当我们使用
mount()方法而不是shallow()方法时。 - 当我们没有正确安装或导入 Enzyme 的
adapter。
解决方法
1. 使用 shallow() 方法
首先，我们需要确保我们在使用 shallow() 方法而不是 mount() 方法。这是因为 shallow() 方法只会渲染组件本身，而不会渲染组件中的子组件。因此，它不需要加载完整的 DOM，从而更快并且更容易测试。
2. 安装适当的 adapter
Enzyme 需要使用适当的适配器来与 React 进行交互。我们需要根据我们的 React 版本来选择适当的适配器。例如，如果我们正在使用 React 16，我们需要安装 enzyme-adapter-react-16。
安装适配器的命令如下：
npm install --save-dev enzyme-adapter-react-16
然后，在我们的测试代码中，我们需要导入适配器并将其配置为 Enzyme 的默认适配器。我们可以在测试文件的顶部添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这将配置 Enzyme 以使用我们所选择的适配器。
3. 检查导入路径
最后，我们需要确保我们正确导入了 find() 方法。我们可以在测试代码中添加以下代码来导入 find() 方法：
-- -------------------- ---- -------
------ - -------- --------- - ---- ---------
------ ------- ---- --------------------------
------ ----- ---- --------
----------- -------- --- --------- ---
----------------------- -- -- -
---------- ------ - ----- -- -- -
----- ------- - -------------------- ----
--------------------------------------------
---
---在这个例子中，我们使用 wrapper.find('div') 来查找组件中的 div 元素。
结论
在使用 Enzyme 进行 React 组件测试时，我们可能会遇到 “find（）未被定义” 错误。这个错误通常发生在我们没有正确安装适配器或使用了错误的方法时。通过使用 shallow() 方法，安装正确的适配器和正确导入 find() 方法，我们可以轻松地解决这个问题，并继续进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675687b7d8a608cf5d8cbe44