对于前端开发，测试是一个必不可少的环节。在 React 开发中，测试组件的功能是否正常也是十分重要的。而Enzyme是React测试工具中比较流行的一个，本文就带大家简单了解Enzyme的基本使用方法。
Enzyme是什么
Enzyme是Airbnb出品的React测试库，提供了一套API用于模拟React组件的行为。Enzyme可以方便地测试组件各种生命周期的产生的影响，如组件状态的变化、子组件的渲染等。
Enzyme的安装
在使用Enzyme之前，需要先将其安装。
使用npm安装：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
Enzyme的使用
使用Enzyme进行测试，我们需要引入相关依赖（如果使用create-react-app搭建的项目，已经默认安装）。
import React from 'react';
import { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import TestComponent from 'TestComponent'; // 引入待测试的组件
Enzyme.configure({ adapter: new Adapter() });Enzyme提供了三种方式来渲染组件，其主要区别在于渲染组件的深度。下面我们以TestComponent组件为例来说明。
- 浅渲染
浅渲染，即只渲染TestComponent组件，不渲染子组件。我们可以通过shallow方法实现。使用shallow方法渲染TestComponent组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------- ---- ----------------
----------------------------------
---------------------
----- ------- - ---------------------- ----
-- -----------------------
- - - ------------------------------------------------------
-- ----------------------
---
---- 完全渲染
完全渲染是指渲染TestComponent及其子组件。我们可以通过mount方法实现。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------------- ---- ----------------
----------------------------------
---------------------
----- ------- - -------------------- ----
-- -----------------------
- - - ------------------------------------------------------
-- ----------------------
---
---- 静态渲染
静态渲染是指使用render方法渲染组件，并返回React测试渲染器的静态HTML结构。这种渲染方式通常用于组件的快照测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ------------- ---- ----------------
----------------------------------
---------------------
----- ------- - --------------------- ----
-- -----------------------
- - - ------------------------------------------------------
-- ----------------------
---
---总结
以上是Enzyme基本的使用方法，通过Enzyme这个测试库，可以帮助我们方便的测试React组件。通过本文的介绍，大家可以了解到浅渲染、完全渲染和静态渲染三种渲染方式。希望本文可以对初学Enzyme的朋友有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646792c6968c7c53b07f3599