在前端开发中，单元测试是必不可少的一环。而在 React 应用中，单元测试可以通过 Jest 和 Enzyme 进行。在本文中，我们将着重介绍如何使用 Enzyme 中的 Shallow Rendering 进行单元测试。Shallow Rendering 可以使我们测试 React 组件中的内容，而不需要考虑其子组件。
Shallow Rendering 概述
Shallow Rendering 是 Enzyme 中的一种测试技术。使用 Shallow Rendering，测试用例可以直接渲染组件，而不必递归地渲染其子组件。这在测试组件时特别有用，因为它使得我们可以专注于特定的组件，并且不必花费过多的时间和精力测试其子组件。
使用 Jest 和 Enzyme 进行 Shallow Rendering
在 Jest 中使用 Shallow Rendering 非常简单。首先，您需要安装 Enzyme 和 Enzyme Adapter React 16：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，您需要在 tests/setupTests.js 文件中进行配置：
// tests/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });接下来，您可以使用 shallow 函数进行 Shallow Rendering：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
----------------------- -- -- -
----------- - --- --------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------
---
---在上面的代码中，我们使用 shallow 函数来渲染 MyComponent，并断言 MyComponent 是否渲染了一个 div 元素。这是一个非常简单的例子，但是您可以使用 Shallow Rendering 进行更复杂的测试，比如测试组件的状态或者 props。
Shallow Rendering 的局限性
尽管 Shallow Rendering 有很多好处，但是它也有一些局限性。由于 Shallow Rendering 只渲染组件的浅层结构，所以它可能无法测试某些组件的功能，比如 DOM 操作或事件处理器。在这些情况下，您可能需要使用 full DOM Rendering 或者 mount Rendering。 full DOM Rendering 允许您在全局 JS DOM 中渲染您的组件，而 mount Rendering 允许您递归地渲染组件及其所有子组件。
结论
Shallow Rendering 是一个非常有用的测试工具，在 React 应用中使用它可以帮助我们更高效地测试组件。但是，您需要注意的是，它也有局限性，需要根据具体情况选择正确的测试技术。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4f466c5c563ced568204d