配合 Cypress 使用 Enzyme 测试 React 组件的最佳实践-FunTeaLearn Online Web Tutorials

本文将介绍如何利用 Cypress 和 Enzyme 两个工具共同测试 React 组件，并提供最佳实践和指导意义。

什么是 Cypress 和 Enzyme？

Cypress 是一个现代化的前端端到端测试工具，它提供了极简的 API 和可靠的自动化测试，同时解决了传统测试工具的一些痛点。Cypress 支持用 JavaScript 编写测试用例，并提供了直接在浏览器中运行测试、可视化的测试结果、自带的调试器等功能，使前端测试变得更加高效和简单。

Enzyme 是一个 React 组件测试工具库，它提供了一系列的 API，可用于测试 React 组件的各种行为，并与 Jest、Mocha 等测试工具集成，支持快速、准确的测试 React 应用。

通过使用这两个工具，我们可以轻松地测试 React 组件。

Cypress 和 Enzyme 的优势

Cypress 和 Enzyme 的优势包括：

Cypress 提供了直接在浏览器中运行测试、无需安装额外的依赖，即可完成端到端测试。
Enzyme 提供了基于组件的测试工具，可以用于测试组件的多种行为。
Cypress 和 Enzyme 结合使用，可以实现目前最全面和可靠的 React 组件测试。

如何使用 Cypress 和 Enzyme 测试 React 组件

安装 Cypress

使用 Cypress 测试 React 组件需要先安装 Cypress。可以在本地安装 Cypress，也可以使用 npm 全局安装 Cypress。以本地安装为例：

npm install cypress --save-dev

配置 Cypress

在项目的根目录下创建一个 cypress.json 文件，并添加以下代码：

{
  "baseUrl": "http://localhost:3000",
  "integrationFolder": "./cypress/integration"
}

其中 baseUrl 表示要在哪个 URL 上运行测试，integrationFolder 表示存放测试用例的目录。

在 package.json 中添加以下代码，用于在运行 npm run cypress:open 命令时自动打开 Cypress：

"scripts": {
    "cypress:open": "cypress open"
  }

安装 Enzyme

使用 Enzyme 测试 React 组件需要先安装 Enzyme。可以使用 npm 安装：

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

配置 Enzyme

在项目中的 cypress/support/index.js 文件中添加以下代码：

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({ adapter: new Adapter() });

最佳实践

测试 UI 组件

Cypress 和 Enzyme 可以很好地测试 UI 组件的各种行为。

以下是一个简单的 UI 组件：

// www.javascriptcn.com code example
import React, { Component } from "react";

class Button extends Component {
  render() {
    const { onClick, label } = this.props;

    return (
      <button onClick={onClick}>
        {label}
      </button>
    );
  }
}

export default Button;

以下是一个 Cypress 测试用例，用于测试按钮是否能够正确地被点击：

// www.javascriptcn.com code example
import React from "react";
import { mount } from "cypress-react-unit-test";
import Button from "../../../src/components/Button";

describe("Button", () => {
  it("should be clickable", () => {
    const onClick = cy.stub().as("onClick");
    mount(<Button onClick={onClick} label="Click me" />)
      .find("button")
      .click()
      .then(() => {
        expect(onClick).to.be.calledOnce;
      });
  });
});

其中，cypress-react-unit-test 是一个用于将 React 组件集成到 Cypress 测试中的库。由于该库通过 cy.mount 将组件渲染到虚拟 DOM 中，故可以使用 cy.find 和 cy.click 等 Cypress API 清晰地测试组件的行为。

测试 Redux 组件

对于 Redux 组件，我们需要按照以下步骤来测试：

初始化 redux store
渲染组件并注入 store
测试组件行为

以下是一个示例 Redux 组件：

// www.javascriptcn.com code example
import React, { Component } from "react";
import { connect } from "react-redux";
import { updateCount } from "../../actions";

class Counter extends Component {
  handleIncrement = () => {
    const { count, updateCount } = this.props;
    updateCount(count + 1);
  };

  render() {
    const { count } = this.props;

    return (
      <div>
        <div data-testid="count">{count}</div>
        <button data-testid="increment-button" onClick={this.handleIncrement}>
          +
        </button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = { updateCount };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

以下是一个 Cypress 测试用例，用于测试 Redux 组件的行为：

// www.javascriptcn.com code example
import React from "react";
import { mount } from "cypress-react-unit-test";
import configureStore from "redux-mock-store";
import { Provider } from "react-redux";
import Counter from "../../../src/components/Counter";
import { updateCount } from "../../../src/actions";

const mockStore = configureStore([]);

describe("Counter", () => {
  it("should increment the count when the button is clicked", () => {
    const initialState = { count: 0 };
    const store = mockStore(initialState);
    const spy = store.spyMiddleware(updateCount);
    mount(
      <Provider store={store}>
        <Counter />
      </Provider>
    );

    cy.get("[data-testid=increment-button]").click().then(() => {
      expect(spy).to.be.calledOnce;
      expect(spy).to.be.calledWith({
        type: "UPDATE_COUNT",
        payload: 1
      });
      cy.get("[data-testid=count]").should("have.text", "1");
    });
  });
});

在 Cypress 测试用例中，我们创建了一个 mock store，并将其注入到组件中。我们还使用了 store.spyMiddleware(updateCount) 来捕获 updateCount 函数的调用，以检查其是否被正确地调用。在测试中，我们模拟了用户点击按钮并检查 store 和组件是否得到了正确的更新。

结语

Cypress 和 Enzyme 是测试 React 组件的有力工具。通过本文的介绍，您应该已经了解了如何配置 Cypress 和 Enzyme，并了解了测试 UI 和 Redux 组件的最佳实践。我们鼓励您多尝试，将其应用到您的开发项目中，以提高测试的可靠性和效率。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67939625504e4ea9bd7ec091

配合 Cypress 使用 Enzyme 测试 React 组件的最佳实践