如何使用 Enzyme 测试 React 中的多边形图形组件

React 是一种流行的前端框架,可以用于构建可重用的组件。在本文中,我们将介绍如何使用 Enzyme 测试 React 中的多边形图形组件。

Enzyme 是什么?

Enzyme 是一个用于 React 的 JavaScript 测试工具库。它提供了一组 API,可以使测试 React 组件变得更加简单和直观。Enzyme 具有以下功能:

  • 渲染 React 组件,并可以检查组件输出。
  • 与组件交互,模拟用户输入,并检查组件的行为。
  • 对组件进行快照测试,以确保它们始终以相同的方式呈现。

准备工作

在我们开始测试之前,需要安装一些必要的工具。首先,我们需要安装 React 和 Enzyme:

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

接下来,我们需要设置 Enzyme,以便它适配 React。在 setupTests.js 文件中添加以下代码:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

然后,在测试文件的开头导入所需的文件和组件:

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Polygon from '../src/Polygon';

Enzyme.configure({ adapter: new Adapter() });

最后,我们可以开始编写测试代码。

测试多边形图形组件

我们将使用 Polygon 组件作为示例。此组件渲染一个多边形图形,并在用户点击图形时更改其颜色。开始先来看一下 Polygon 组件的代码:

import React, { Component } from 'react';

class Polygon extends Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 'red',
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ color: 'blue' });
  }

  render() {
    const points = this.props.points.join(' ');
    const { color } = this.state;

    return (
      <svg>
        <polygon points={points} fill={color} onClick={this.handleClick} />
      </svg>
    );
  }
}

export default Polygon;

我们将测试组件的以下方面:

  1. 组件可以使用传递的参数渲染。
  2. 点击组件会更改其颜色。

首先,我们将测试组件是否可以正确渲染。为此,我们将使用 Enzyme 的 shallow 函数。它将组件渲染为虚拟 DOM,并返回包含组件的浅层包装器。在测试文件中添加以下代码:

describe('Polygon', () => {
  const points = [0, 0, 50, 50, 50, 0];

  it('renders correctly', () => {
    const wrapper = shallow(<Polygon points={points} />);
    expect(wrapper).toMatchSnapshot();
  });
});

此代码将创建一个包含 Polygon 组件的浅层包装器,并将它与预期的快照进行比较。如果组件正确地渲染,则测试将通过。

接下来,我们将测试组件是否可以在单击时更改其颜色。为此,我们需要模拟单击事件,并检查是否已更改颜色。在测试文件中添加以下代码:

describe('Polygon', () => {
  const points = [0, 0, 50, 50, 50, 0];

  it('renders correctly', () => {
    const wrapper = shallow(<Polygon points={points} />);
    expect(wrapper).toMatchSnapshot();
  });

  it('changes color when clicked', () => {
    const wrapper = shallow(<Polygon points={points} />);

    expect(wrapper.find('polygon').prop('fill')).toEqual('red');

    wrapper.find('polygon').simulate('click');

    expect(wrapper.find('polygon').prop('fill')).toEqual('blue');
  });
});

此代码将在单击组件后,使用 find 函数找到 polygon 元素,检查其颜色是否在点击之后已更改。

最终,我们将运行测试:

npm test

测试完成后,在您的终端窗口中应看到测试的结果。如果测试通过,则您已成功测试多边形图形组件。

总结

本文介绍了如何使用 Enzyme 测试 React 中的多边形图形组件,并提供了示例代码和详细说明。通过使用 Enzyme,您可以轻松地测试 React 组件,确保它们在整个开发过程中始终正常工作。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65a18c72add4f0e0ff99b161


纠错反馈