在 React 应用程序中使用 Enzyme 测试父组件 props 的修改-JavaScript中文网-JavaScript教程资源分享门户

随着 React 应用程序的不断发展，测试变得越来越重要。Enzyme 是 React 的一种测试工具，它可以帮助我们轻松地测试 React 组件和 DOM 的交互、视觉和交互效果。然而，在测试中涉及到了 React 的生命周期以及组件间传递的 props，这对测试的准确性和效率提出了很高的要求。本文将介绍在 React 应用程序中使用 Enzyme 测试父组件 props 的修改的方法。

什么是 Enzyme

Enzyme 是 Airbnb 开源的一个 React 组件的测试框架，是 React 项目中常用的测试工具之一。Enzyme 具有以下特点：

API 丰富：提供了一个简单而功能强大的 API，使您能够轻松地测试 React 组件。
支持不同类型的测试：支持不同的测试类型（浅测试，深测试和静态渲染器）。
可读性强：测试代码可以像原始 React 组件代码一样易读。

父组件和子组件的 props 传递

在 React 应用程序中，父组件可以传递 props 给其子组件。这些 props 是子组件的属性，可以帮助实现各种组件之间的通信。在组件中修改某个 props 的值并不是一件容易的事情。因为通常 React 组件具有不可变属性，即在组件内无法更改其父级传递的 props。如果必须更改某个 props 值，则必须更新 props 而不是直接更改其值。这可以通过在父级中使用 setState() 来实现。一旦 props 更改，React 将重新渲染组件。

父组件在渲染子组件时，可以修改子组件的 props。这在 React 中通常用于动态的组件渲染。考虑下面的代码示例：

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  state = { message: "Welcome!" }

  handleClick = () => {
    this.setState({ message: "Hello, World!" });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        <MyComponent message={this.state.message} />
      </div>
    );
  }
}

export default App;

在这个例子中，App 组件将其 state 中的 message 作为 props 传递给 MyComponent 组件。当用户单击按钮时，App 组件将其 state 中的 message 更改为“Hello, World!”。这将导致 MyComponent 组件的 props 发生更改。父组件中的 setState() 调用触发了 MyComponent 组件的重新渲染，将更新的 props 传递给它。

在测试中使用 Enzyme

在测试 React 应用程序时，Enzyme 是一个强大而受欢迎的测试工具。它提供了多个方法，用于测试组件的不同方面和受控行为。下面介绍几种常用的测试方法。

浅测试

浅测试是指仅测试组件的一层。在浅测试期间，除了当前组件的 props 和 state 之外，我们无法访问该组件的子组件。使用 shallow() 方法可以创建一个浅层包装器。这时我们可以测试组件的基本属性和事件处理程序。例如，考虑下面的测试代码片段：

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

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

describe('App', () => {
  it('renders MyComponent', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find(MyComponent).length).toBe(1);
  });
});

在这个测试用例中，我们使用浅层渲染器（shallow()）创建包装器。然后，我们使用 find() 方法查找包装器中包含的组件。最后，我们使用断言语句（expect()）验证 MyComponent 组件是否正确呈现。

模拟事件

Enzyme 对于测试组件中事件的处理是非常方便的。可以使用 simulate() 方法来发起组件中的事件。例如：

it('can change message on MyComponent', () => {
  const wrapper = shallow(<App />);
  const button = wrapper.find('button');
  button.simulate('click');
  expect(wrapper.find(MyComponent).prop('message')).toBe('Hello, World!');
});

在此测试用例中，我们在渲染器返回的包装器上找到按钮，然后通过 simulate() 方法调用它的 click 事件。最后，我们验证是否成功更改 MyComponent 组件的 props 中的 message 值。

全部渲染

在某些情况下，浅层包装器可能无法测试应用程序中的某些功能。Enzyme 还提供了一个 mount() 方法，用于模拟完全呈现 React 组件和其子组件的过程。例如：

import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import App from './App';

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

describe('App', () => {
  it('renders without crashing', () => {
    const wrapper = mount(<App />);
    expect(wrapper.find('button').text()).toBe('Click me');
    wrapper.find('button').simulate('click');
    expect(wrapper.find('MyComponent').prop('message')).toBe('Hello, World!');
  });
});

在这个测试用例中，我们使用 mount() 方法创建了一个完全的 React 外壳，实现了一个受控的完整 React 组件，它可以执行点击事件并测试其结果。

Enzyme 测试父组件 props 的修改

在测试过程中，测试父级修改子组件的 props 值是一项重要的功能需求。考虑下面的代码示例：

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}

export default MyComponent;

在这个组件中，我们定义了一个属性 message，并在组件的渲染时显示。现在，想象一下要测试 MyComponent 组件的渲染并修改其由父级传递的 message 属性的行为，可以通过模拟更改父级状态（setState()）来实现。例如，以下代码将显示如何测试 MyComponent 的渲染并更改其 props：

it('can change message passed as a prop', () => {
  const wrapper = mount(<App />);
  expect(wrapper.find(MyComponent).prop('message')).toBe('Welcome!');
  wrapper.setState({ message: 'Goodbye!' });
  expect(wrapper.find(MyComponent).prop('message')).toBe('Goodbye!');
});

在这个测试用例中，我们首先在父组件中找到 MyComponent 组件。然后，我们断言组件所接收到的 props 值是否正确。接下来，我们修改父级 state，通过改变 props 进而重新渲染子组件。最后，我们再次验证 MyComponent 的 props 是否已更新。

总结

在 React 应用程序中，测试是非常重要的。Enzyme 是一种优秀的测试框架，可以帮助我们轻松地测试 React 应用程序的各个方面。本文介绍了在 React 应用程序中使用 Enzyme 测试父组件 props 的修改的方法，以及如何使用浅层渲染器、模拟事件和完全渲染器来测试 React 组件的不同方面。在测试过程中，我们必须小心谨慎，以确保组件的正确性和按预期工作。

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

在 React 应用程序中使用 Enzyme 测试父组件 props 的修改