Enzyme 和 React Test Utils 正确的使用姿势及异同
React 是当前流行的前端框架之一，许多开发者使用 react 进行 web 应用程序开发。在开发大型的 react 应用程序时，测试是不可或缺的一项工作。React 提供了 Test Utils 用于测试组件。
然而，React Test Utils 的 API 非常基础，不方便进行组件测试。因此，Enzyme 库就应运而生，它基于 React Test Utils 提供了一个更好的 API 范围，使得测试 React 组件变得容易。
在本篇文章中，我们将会了解 Enzyme 和 React Test Utils 的使用姿势，比较它们的异同，以及如何正确地使用它们来测试 React 组件。
Enzyme 和 React Test Utils 的区别
React Test Utils 是 React 官方提供的用于测试 React 组件的工具包，它包含许多内置的有用的功能。
Enzyme 是由 Airbnb 开发的一个外部库，其相比于 React Test Utils 具有更好的 API 设计，更为简洁，可以很容易地测试 React 组件。Enzyme 支持 mount()，shallow() 和 render() 等方法，能够完全模拟组件的生命周期，是一个非常实用的测试工具。
在实际使用中，对于简单的组件，React Test Utils 可以胜任。而对于复杂的组件，我们可以选择使用 Enzyme，这样能够更易于维护和测试。
正确使用 Enzyme 和 React Test Utils
首先，我们需要安装 Enzyme 和 React Test Utils：
npm install enzyme react-addons-test-utils -D
mount() 方法和 shallow() 方法
mount() 方法和 shallow() 方法都是 Enzyme 提供的用于测试组件的方法。下面我们分别来了解它们的意义和用法。
// javascriptcn.com 代码示例
import React from 'react';
import Enzyme, { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
describe('Test using mount()', () => {
it('should update state when button is clicked', () => {
const wrapper = mount( <YourComponent /> );
const button = wrapper.find('.button-class-name');
button.simulate('click');
expect(wrapper.state().isClicked).toEqual(true);
});
});
describe('Test using shallow()', () => {
it('should render without throwing an error', () => {
const wrapper = shallow( <YourComponent /> );
expect(wrapper.find('.button-class-name')).toHaveLength(1);
});
});从上面代码中，我们可以看到 mount() 方法和 shallow() 方法的使用方式及测试用例。mount() 方法和 shallow() 方法之间的唯一区别在于：mount() 方法会像 React 组件一样在 DOM 层级中进行完整渲染，而 shallow() 方法则只渲染组件本身而不包含其子组件。因此，mount() 方法比 shallow() 方法更为适用于复杂的组件测试。
测试组件 state 和 props
组件的 state 和 props 是 React 中最重要的两个属性。我们可以使用 Enzyme 提供的 state() 和 props() 方法来测试组件中的 state 和 props。示例如下所示：
// javascriptcn.com 代码示例
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { YourComponent } from './YourComponent';
Enzyme.configure({ adapter: new Adapter() });
describe('YourComponent', () => {
it('should render props correctly', () => {
const props = {
name: 'John',
age: 30
};
const wrapper = shallow(<YourComponent {...props}/>);
expect(wrapper.instance().props.name).toBe('John');
expect(wrapper.instance().props.age).toBe(30);
});
it('should change state correctly', () => {
const wrapper = shallow(<YourComponent />);
expect(wrapper.state('isClicked')).toBe(false);
wrapper.setState({ isClicked: true });
expect(wrapper.state('isClicked')).toBe(true);
});
});enzyme 中的 state() 方法和 props() 方法可以分别用来获取组件的状态和属性。
总结
通过本篇文章，我们了解了 Enzyme 和 React Test Utils 的使用姿势及区别，以及正确测试组件的方法。Enzyme 库让我们的 React 组件测试变得更加高效、简洁，可以更好地提高组件质量。因此，我们应该根据实际需求选择合适的测试工具，合理地运用这些工具我们可以更好地开发企业级应用，减少测试负担，提高生产力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65459fa87d4982a6ebf41672