React 是一款非常优秀的前端库，它可以让使用者高效地构建 UI，同时拥有组件化和状态管理等优秀特性。然而，在使用 React 进行开发时，我们发现单元测试和组件测试比较困难，需要使用一些辅助工具。在这些辅助工具中，Enzyme 可以说是相当常用，它提供了一些 API 可以在测试环境中深度挖掘 React 组件渲染的细节和秘密。
Enzyme 是什么？
Enzyme 是一个由 Airbnb 开发的测试工具，它可以与 Jest、Mocha 和 Chai 等测试框架一起使用。通过 Enzyme，我们可以在测试环境中对 React 组件进行深度测试，如模拟用户操作、模拟不同状态下的渲染等。
安装 Enzyme
在使用 Enzyme 时，我们需要先安装它：
npm install --save-dev enzyme enzyme-adapter-react-16
配置 Enzyme
在使用 Enzyme 进行测试前，我们需要先配置它。在项目根目录中，新建一个 setupTests.js 文件，并输入以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这段代码会配置 Enzyme 使用 React 16 的适配器，这样 Enzyme 就可以正确地渲染 React 组件和 DOM 像素。
如何使用 Enzyme 进行测试？
在使用 Enzyme 进行测试时，我们通常会使用 shallow() 和 mount() 等方法来对 React 组件进行深度测试。这些方法会对组件进行渲染，并返回一个包含组件渲染结果的 ReactWrapper 对象。
渲染组件
测试渲染组件时，我们通常使用 shallow() 方法来进行浅渲染。这种渲染方式仅仅渲染组件本身，而不会渲染子组件。例如：
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('renders without crashing', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.exists()).toBe(true);
});上面的代码测试了 MyComponent 组件能否正常渲染并且没有崩溃。
渲染子组件时，我们需要使用 mount() 方法来进行深渲染。这种渲染方式会将整个组件树都渲染出来。例如：
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
it('renders without crashing', () => {
const wrapper = mount(<MyComponent />);
expect(wrapper.exists()).toBe(true);
});这个例子将会测试 MyComponent 组件是否可以正常渲染，同时也会渲染 MyComponent 组件的所有子组件。
模拟事件
在测试组件时，我们通常需要模拟用户事件。例如：
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- --------- ------- -------- ---- ------ -- --------- -- -- - ----- ----------- - ---------- ----- ------- - -------------------- --------------------- ---- --------------------------------------------- --------------------------------------------- ---
这个例子测试了 MyComponent 组件在点击按钮时是否会调用传入的 onClick 回调函数。
注意，在模拟事件时，需要使用正确的事件名。常用的事件有：
clickchangesubmitinput
获取组件状态和属性
在测试组件时，我们通常需要获取组件的状态和属性。例如：
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('shows the correct title', () => {
const wrapper = shallow(<MyComponent title="Hello World!" />);
expect(wrapper.prop('title')).toEqual('Hello World!');
});这个例子测试了组件是否正确地显示传入的 title 属性。
我们也可以获取组件的状态。例如：
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- --------- --- ------- ------- ------- -- -- - ----- ------- - -------------------- ---- -------------------------------------------- ------------------ -------- - --- -------------------------------------------- ---
这个例子测试了组件的内部状态是否正确。
总结
在编写 React 组件时，我们通常需要使用 Enzyme 进行测试。通过 Enzyme，我们可以模拟用户事件、获取组件状态和属性，以及模拟不同渲染场景。这些测试可以帮助我们更好地发现问题，提高项目质量。
完整示例代码：
-- -------------------- ---- ------- ------ - -------- ----- - ---- --------- ------ ----------- ---- ---------------- -- ----- -- ----------- ------- ---------- -- -- - ----- ------- - -------------------- ---- ------------------------------------ --- -- ----- -- ----------- ------- ---------- -- -- - ----- ------- - ------------------ ---- ------------------------------------ --- -- -------- -- --------- ------- -------- ---- ------ -- --------- -- -- - ----- ----------- - ---------- ----- ------- - -------------------- --------------------- ---- --------------------------------------------- --------------------------------------------- --- -- -------- -- --------- --- ------- ------- -- -- - ----- ------- - -------------------- ------------ ------- ---- -------------------------------------------- --------- --- -- -------- -- --------- --- ------- ------- ------- -- -- - ----- ------- - -------------------- ---- -------------------------------------------- ------------------ -------- - --- -------------------------------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455eb1a968c7c53b0942edc