了解您的 React 组件：Enzyme 测试-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的前端框架，可以快速构建交互性 Web 应用程序。但是，测试 React 组件并不总是那么简单，特别是当您的应用程序变得复杂时。这时，Enzyme 可以成为您的救星。

什么是 Enzyme？

Enzyme 是一个由 Airbnb 创建的用于测试 React 组件的 JavaScript 工具库。它提供了一系列 API，可以让您更容易地执行各种测试、查询和操作，以及更容易地理解您的 React 组件。

为什么使用 Enzyme？

Enzyme 的主要优点在于它提供了一种方法，可以更容易地测试 React 组件。它使您能够在不必渲染整个组件树的情况下测试组件。这意味着测试可以更快速、更可靠、更容易编写。

安装 Enzyme

在开始使用 Enzyme 之前，您需要在项目中安装它。 Enzyme 支持 React 16 中的三个不同 Adapter：react-test-renderer, enzyme-adapter-react-16, enzyme-adapter-react-15。对于 React 16，您应该安装 react-test-renderer 和 enzyme-adapter-react-16。

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

写一个新的测试

假设您有一个名为 LoginForm 的 React 组件，现在要测试它。下面是一个基本的 Enzyme 测试示例：

// javascriptcn.com 代码示例
import { shallow } from 'enzyme';
import LoginForm from './LoginForm';

describe('LoginForm', () => {
  it('renders a form', () => {
    const wrapper = shallow(<LoginForm />);
    expect(wrapper.find('form')).toHaveLength(1);
  });
});

这个测试用例只检查 LoginForm 组件是否呈现出一个包含一个 <form> 元素的元素。由于 Enzyme 提供了一个用于渲染 React 组件的浅渲染器，因此我们可以轻松地测试这个组件。

mount 还是 shallow？

Enzyme 提供了两个测试 API： shallow() 和 mount()。两者的区别在于 mount() 执行的是完整的渲染，而 shallow() 仅渲染组件的一层。这意味着 shallow() 比 mount() 更快，但 mount() 可以提供更多的交互性测试。

一般情况下，建议您从速度上优先考虑 shallow()，并仅在必要时使用 mount() 进行测试。

组件的查询

Enzyme 提供了一些非常有用的方法，可以查询渲染的 React 组件。下面是其中一些方法：

find(selector)：在当前组件元素树中查找匹配给定选择器的所有元素。
at(index)：获取具有给定索引的匹配元素。
first()：获取集合中的第一个元素。
last()：获取集合中的最后一个元素。
findWhere(predicate)：查找满足给定预测函数的第一个元素。

以下是一个例子：

// javascriptcn.com 代码示例
import { mount } from 'enzyme';
import LoginForm from './LoginForm';

describe('LoginForm', () => {
  it('renders two input fields', () => {
    const wrapper = mount(<LoginForm />);
    expect(wrapper.find('input')).toHaveLength(2);
  });

  it('renders a username and password input field', () => {
    const wrapper = mount(<LoginForm />);
    expect(wrapper.find('input').at(0).props().name).toEqual('username');
    expect(wrapper.find('input').at(1).props().name).toEqual('password');
  });

  it('renders a submit button', () => {
    const wrapper = mount(<LoginForm />);
    expect(wrapper.find('button[type="submit"]')).toHaveLength(1);
  });
});

这个测试用例检查 LoginForm 组件是否呈现出一个包含两个 <input> 元素和一个带有 type="submit" 的 <button> 元素的元素。

操作组件

Enzyme 非常适合用于与 React 组件交互性测试。它提供了一些实用方法，例如：

simulate(event[, mock])：模拟指定的方法并传递事件属性和值。
prop(key)：获取具有给定键的组件属性。
props()：获取所有组件属性。
state([key])：获取当前状态（如果指定键，则获取特定状态）。
setProps(props[, callback])：设置组件属性，并重新渲染组件。

以下是一个例子：

// javascriptcn.com 代码示例
import { mount } from 'enzyme';
import LoginForm from './LoginForm';

describe('LoginForm', () => {
  it('should update the state of the component when the value of the input changes', () => {
    const wrapper = mount(<LoginForm />);
    const usernameInput = wrapper.find('input').at(0);

    usernameInput.simulate('change', {
      target: { value: 'johndoe' },
    });

    expect(wrapper.state('username')).toEqual('johndoe');
  });
});

这个测试用例检查当用户在 username 输入框中输入值时，LoginForm 组件的状态是否被正确更新。

总结

Enzyme 是一个强大的工具，可以帮助您更轻松地测试 React 组件。它提供了多种查询和操作方法，可以更容易地理解和测试 React 组件的不同方面。

无论您是新手还是熟练的开发人员，Enzyme 都是一个值得考虑的工具，可以大大提高您的测试流程。

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