Enzyme 在 React 组件测试中测试组件的 props 和 state

Enzyme 在 React 组件测试中测试组件的 props 和 state

前言

在前端开发中，我们写了很多 React 组件，可是怎么保证自己的组件能够正常运行呢？这时候，测试就起到了很重要的作用。而 Enzyme 是一个非常好的 React 测试工具，本文将介绍如何使用 Enzyme 在 React 组件中测试组件的 props 和 state。

Enzyme 简介

Enzyme 是由 Airbnb 开发的一个 React 组件测试工具，可以方便地渲染、操纵和遍历组件树。Enzyme 可以像 jQuery 那样对虚拟 DOM 进行查询，使得测试组件变得非常便捷和简单。

安装 Enzyme

首先，需要安装 Enzyme。我们可以使用 npm 或 yarn 安装：

npm install --save-dev enzyme enzyme-adapter-react-16

yarn add --dev enzyme enzyme-adapter-react-16

其中，enzyme-adapter-react-16 是与 React 版本对应的 Enzyme 适配器，如果 React 版本不一样，那么需要安装相应的 Enzyme 适配器。

测试组件的 props

在测试组件的 props 时，我们需要通过 enzyme 的 shallow 方法来访问组件。例如，我们要测试一个 Person 组件，该组件接收 name 和 age 两个 props，然后显示它们。可以使用 shallow 方法来测试该组件：

import React from 'react'; import { shallow } from 'enzyme'; import Person from './Person';

describe('Person component', () => { it('should render name and age', () => { const wrapper = shallow(); expect(wrapper.find('.name').text()).toEqual('Name: Tom'); expect(wrapper.find('.age').text()).toEqual('Age: 18'); }); });

Person 组件的代码如下：

import React from 'react';

const Person = ({ name, age }) => (

export default Person;

在该测试用例中，我们使用了 shallow 方法访问了 Person 组件，并将 name 和 age 两个 props 传递给组件。然后，我们使用 expect 断言语句来判断组件是否正确地渲染了 name 和 age。

测试组件的 state

在测试组件的 state 时，我们同样需要通过 enzyme 的 shallow 方法来访问组件。例如，我们要测试一个 Counter 组件，该组件有一个 state 属性 count，然后每次点击按钮后 count 的值会加 1。可以使用 shallow 方法来测试该组件：

import React from 'react'; import { shallow } from 'enzyme'; import Counter from './Counter';

describe('Counter component', () => { it('should increase count after click button once', () => { const wrapper = shallow(); expect(wrapper.find('.count').text()).toEqual('Count: 0'); wrapper.find('.btn').simulate('click'); expect(wrapper.find('.count').text()).toEqual('Count: 1'); }); });

Counter 组件的代码如下：

import React from 'react';

class Counter extends React.Component { state = { count: 0, };

handleClick = () => { this.setState(state => ({ count: state.count + 1, })); };

render() { const { count } = this.state; return (

export default Counter;

在该测试用例中，我们使用了 shallow 方法访问了 Counter 组件，并模拟点击按钮。然后，我们使用 expect 断言语句来判断组件是否正确地更新了 state。

总结

本文介绍了如何使用 Enzyme 在 React 组件中测试组件的 props 和 state。测试是前端开发不可或缺的一部分，它可以帮助我们保证项目的质量，避免出现不必要的错误。而 Enzyme 是一个非常好的 React 测试工具，它可以让测试变得非常简单和便捷。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65475d627d4982a6eb1bb49f