什么是 Enzyme ？
Enzyme 是一个流行的 React 测试工具，它为 React 组件提供了易于使用的 API，可以帮助我们轻松地测试 React 组件的渲染行为和交互逻辑。Enzyme 支持多种渲染方式，包括浅层渲染、完整渲染和静态渲染。同时，Enzyme 的 API 也非常直观易懂，可以快速编写测试用例。
如何在 React 项目中引入 Enzyme ？
为了在 React 项目中使用 Enzyme，我们需要先安装 Enzyme 和对应的适配器。以下是安装步骤：
npm i --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme 是 Enzyme 的核心库，enzyme-adapter-react-16 是适配 React 16.x 版本的适配器，react-test-renderer 是 React 官方提供的一个测试工具，我们将在后面的示例代码中使用它。
Enzyme 有三种渲染方式，具体实现方式如下：
- 浅层渲染（Shallow Rendering）
浅层渲染是 Enzyme 中最常用的渲染方式，它仅渲染组件本身，而不渲染子组件。这种方式可以帮助我们专注于测试当前组件的渲染行为和交互逻辑，而不受子组件的影响。
-- -------------------- ---- ------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- --- ------------------ -- -- - ---------- ------ ----------- -- -- - ----- ------- - --------------- ---- ---------------------------------- --- ---------- ---- --------- -- -- - ----- ------- - ---------- ----- ------- - --------------- ----------------- ---- -------------------------- ----------------------------------- --- ---展开代码
- 完整渲染（Full DOM Rendering）
完整渲染是 Enzyme 中另一种常用的渲染方式，它会渲染整个组件树，包括子组件。通过完整渲染，我们可以测试子组件之间的交互逻辑，但是它的执行速度相对较慢。
-- -------------------- ---- ------- ------ ------- - ----- - ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- --- --------------------- -- -- - ---------- ------ ----------- -- -- - ----- ------- - ---------------- ---- ---------------------------------- --- ---------- ---- ----- --------- -- -- - ----- ------- - ---------------- ---- -------------------------------------------- - ------- - ------ -- - --- -------------------------------------------- - ------- - ------ -- - --- ---------------------------------------- --------------------------------------------------------- --- ---展开代码
- 静态渲染（Static Rendering）
静态渲染不会在 DOM 中插入任何节点，而是返回一个 JSON 形式的“快照”。通过比较不同版本的快照，我们可以检测组件的渲染行为是否变化，以及是否存在断言错误。
import renderer from 'react-test-renderer'; describe('LoginStatus', () => { it('should render correctly', () => { const tree = renderer.create(<LoginStatus isLoggedIn={true} />).toJSON(); expect(tree).toMatchSnapshot(); }); });
结语
通过使用 Enzyme，我们可以轻松地测试 React 组件的渲染行为和交互逻辑，增加代码的可维护性和可靠性。尝试使用 Enzyme 测试你的下一个 React 项目，并享受高效和愉悦的测试过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7f20de46428fe9eda4ebf
