跨组件测试 React 使用 Enzyme 解释 React 应用程序-JavaScript中文网-JavaScript教程资源分享门户

跨组件测试 React 使用 Enzyme

React 是一个非常流行并高度可扩展的 JavaScript 库，多数前端开发人员已经开始采用该库开发应用程序。在一个复杂的 React 应用程序中，单元测试非常关键，因为它可以帮助我们验证组件行为是否正确，从而加快应用程序的开发时间和减少错误。

然而，测试组件之间的交互和互动是非常棘手的。因此，我们需要一种测试框架来支持这种跨组件的测试。Enzyme 是一个流行的 React 测试工具，它可以帮助我们在 React 应用程序中轻松执行测试，并验证组件的行为和交互。

本文将介绍 Enzyme 和如何使用它进行跨组件测试的 React 应用程序。

何为 Enzyme？

Enzyme 是一个用于 React 应用程序的测试框架，在 Jest、Jasmine 和 Mocha 等测试框架上工作得很好。它封装了 React 组件，方便在测试环境中运行。它提供了三种渲染方式，即 Shallow、Mount 和 Render。这些方法旨在协助 React 组件的测试和仿真。

Shallow：用于浅渲染，即只渲染当前组件，不会渲染其子组件。

Mount：用于完整的 DOM 渲染，即全方位渲染，包括子组件和其它页面元素。

Render：用于将组件渲染为静态 HTML，并返回一个 Cheerio 包装器，可以用来操作渲染的 HTML。

就像我们用 Jest 进行测试一样，使用 Enzyme 的最基本代码如下：

import Enzyme, {shallow, mount, render} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

// To use shallow rendering
const wrapper = shallow(<MyComponent/>);

// For full DOM rendering
const wrapper = mount(<MyComponent/>);

// Render to cheerio wrapper
const wrapper = render(<MyComponent/>);

跨组件测试

让我们考虑一个带有表格组件和控制器组件的应用程序。该控制器组件应具有以下功能：

它应该能够更新表格中已输入的数据。
它应该有一行添加按钮，以便添加新行。
还有一个子组件，该子组件应该返回从输入中派生出的数据，并提供一些计算功能。

现在，我们想要测试这个控制器组件是否按预期工作。现在，我们可以编写一个测试用例，将组件渲染到 ShallowWrapper 中，然后读取其状态属性，如下所示：

import React from 'react';
import {shallow} from 'enzyme';

import ControllerComponent from './ControllerComponent';

it('Should update table rows when input updated', () => {
    const wrapper = shallow(<ControllerComponent/>);

    expect(wrapper.state().rows).toEqual([]);

    // Simulate a change event
    wrapper.find('input').simulate('change', {
        target: {
            value: 'New Value'
        }
    });

    expect(wrapper.state().rows).toEqual(['New Value']);
});

在此测试用例中，我们将组件渲染到浅层包装器中，然后模拟更改事件并验证其状态属性是否已更新。

此外，我们可以为添加新行按钮模拟点击事件，并检查表行是否已添加：

it('Should add a new row when the "Add Row" button is clicked', () => {
    const wrapper = shallow(<ControllerComponent/>);

    expect(wrapper.state().rows).toEqual([]);

    // Click the "Add Row" button
    wrapper.find('button').simulate('click');

    expect(wrapper.state().rows).toEqual(['']);
});

在编写测试用例时，我们应该注意以下事项：

确保渲染组件的深度是正确的，以便正确检查状态和属性。
模拟组件的交互，如更改事件或单击事件。
验证交互是否已更新状态或组件的属性。
确保覆盖所有可能的测试用例，包括边缘情况和不正确的输入。

最后，我们可以编写用于测试控制器组件的子组件的测试用例。在这些情况下，我们可以使用 Enzyme 提供的 mount（挂载）方法，以便可以对子组件进行真实的 DOM 操作和交互。以下是添加行的测试用例：

it('Should add a new row when the "Add Row" button is clicked on the child component', () => {
    const wrapper = mount(<ControllerComponent/>);

    expect(wrapper.state().rows).toEqual([]);

    // Click the "Add Row" button
    wrapper.find('button').simulate('click');

    // Test if the child component has the same rows
    expect(wrapper.find('ChildComponent').props().rows).toEqual(['']);
});

在这个测试用例中，我们使用 mount 方法挂载了控制器组件，并模拟了添加新行按钮的单击。然后，我们通过 props 获取子组件的行，并验证它是否与控制器组件的行相同。

总结

在本文中，我们深入介绍了 Enzyme，并展示了如何使用它进行 React 应用程序的跨组件测试。我们编写了一些有趣的测试用例来验证控制器组件及其子组件是否按预期工作。

通过使用 Enzyme 和良好的测试实践，我们可以减少错误和错误修复时间，并加速应用程序的开发和部署。如果你是一个前端开发人员，我强烈建议你了解 Enzyme，并在你的应用程序中使用它来执行跨组件测试。

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

跨组件测试 React 使用 Enzyme 解释 React 应用程序

纠错反馈