解决 Enzyme 在 Jest 中使用出现的 “shallow” 的错误

在前端开发中，我们经常会使用 Jest 进行单元测试，用以保证代码的质量和功能性。而 Enzyme 作为一个强大的 React 测试工具，也被广泛使用。但是，在 Jest 中使用 Enzyme 进行测试时，有时会出现 “shallow” 的错误，这篇文章将详细介绍该问题的原因和解决方案。

什么是 Enzyme 和 Jest？

• Enzyme 是一个由 Airbnb 开发的用于测试 React 组件的 JavaScript 库。它提供了一组工具，用于模拟 React 的渲染输出，使我们可以更轻松地编写断言和测试。
• Jest 是由 Facebook 开发的一个 JavaScript 测试框架。它提供了一组测试运行器、断言库和模拟器，用于测试 JavaScript 代码的各个方面。

什么是 shallow？

shallow 是 Enzyme 提供的一种测试组件的方法，它可以浅层渲染组件，并返回一个包含组件渲染结果的浅层包装器。使用 shallow 可以预期组件的渲染行为，单元测试也可以轻松编写和维护。

为什么会出现 “shallow” 的错误？

当我们在 Jest 中使用 Enzyme 的 shallow 方法进行组件测试时，有可能会出现如下错误：

TypeError: Cannot read properties of undefined (reading 'shallow')

这种错误通常是因为 Jest 运行时无法识别 Enzyme 的 shallow 方法所导致的。

如何解决 “shallow” 的错误？

要解决上述错误，我们需要安装并使用相应的适配器，如 enzyme-adapter-react-16，将其与 Enzyme 集成。下面是解决该问题的具体步骤。

安装 Enzyme 和适配器：

npm install --save-dev enzyme enzyme-adapter-react-16

创建适配器文件和配置文件：

在项目的 src 目录下，创建一个 enzyme.js 文件，并添加以下代码：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

在项目的根目录下，也创建一个 .babelrc 文件，并添加以下代码：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

在测试文件中引用 Enzyme 和适配器：

在测试文件的开头添加以下代码：

import Enzyme, { shallow } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

Enzyme.configure({ adapter: new Adapter() });

现在，我们就可以使用 Enzyme 的 shallow 方法进行 React 组件的测试了。

示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- -------------------------------------

------ ----------- ---- ----------------

------------------ -------- --- --------- ---

------------ ----------- -- -- -
  ------------ ------ ---------- -- -- -
    ----- ------- - -------------------- ----
    ----------------------------------
  ---
---

总结：

本篇文章介绍了 Enzyme 和 Jest，在 Jest 中使用 Enzyme 进行测试时可能出现的 “shallow” 错误，并提供了解决该问题的详细步骤和示例代码。希望读者可以通过本文的指导，更好地进行前端开发中的单元测试工作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3f47d48841e98940651eb