如何使用 Enzyme 测试 React Hooks？-JavaScript中文网-JavaScript教程资源分享门户

在 React 16.8 版本中推出了 Hooks，使得 React 的函数式组件也能够使用状态和其他 React 特性，这大大简化了组件的代码，加快了开发效率。但是，使用 React Hooks 也带来了一些新的挑战，其中包括如何进行测试。

本文将介绍如何使用 Enzyme 进行 React Hooks 的测试，让你能够轻松应对 React Hooks 的开发和测试。

Enzyme 简介

Enzyme 是一个由 Airbnb 开发的 React 测试工具，专门用于测试组件。它提供了一套 API，使得我们能够方便地操作和测试组件的 props、状态和事件等属性和方法。

Enzyme 支持三种类型的测试：浅渲染、静态渲染和全渲染。它还能够与 Jest 和其他测试框架无缝集成。

测试 React Hooks

在测试 React Hooks 时，我们希望验证以下内容：

组件能够正确地使用 Hook。
组件状态更新后，正确地渲染对应的界面。
组件调用 Hook 带来的副作用被正确地处理。

下面我们将通过一个示例来演示如何测试 React Hooks。

假设我们有一个使用 useState Hook 的组件：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

export default Counter;

我们希望验证：

初始化时 count 显示为 0。
点击 +1 后，count 能够正确地更新，并渲染到界面上。

接下来，使用 Enzyme 进行测试。

安装 Enzyme

首先，我们需要安装 Enzyme。执行以下命令：

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

配置 Enzyme

接着，在测试文件中，配置 Enzyme：

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

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

测试 useState

我们使用 shallow 方法进行浅渲染测试，这里需要导入 Counter 组件：

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

describe('useState', () => {
  it('should initialize count to 0', () => {
    const wrapper = shallow(<Counter />);
    const count = wrapper.find('h2').text();

    expect(Number(count)).toEqual(0);
  });

  it('should update count when the button is clicked', () => {
    const wrapper = shallow(<Counter />);
    const button = wrapper.find('button');
    button.simulate('click');
    const count = wrapper.find('h2').text();

    expect(Number(count)).toEqual(1);
  });
});

在第一个测试中，我们首先使用 shallow 方法进行浅渲染，然后通过 find 方法找到 h2 标签，检查它的内容是否为 0。

在第二个测试中，我们模拟按钮点击事件，并检查 h2 标签的内容是否为 1。

测试 useEffect

对于 useEffect，我们可以使用 mount 方法进行全渲染测试。假设我们有一个使用 useEffect Hook 的组件：

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [title, setTitle] = useState('');

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  const handleInputChange = (event) => {
    setTitle(event.target.value);
  }

  return (
    <div>
      <h2>{count}</h2>
      <input value={title} onChange={handleInputChange}/>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

export default Counter;

我们希望验证：

组件能够正确地使用 useEffect。
组件状态更新后，正确地渲染对应的界面。
组件调用 useEffect 带来的副作用被正确地处理。

测试如下：

// javascriptcn.com 代码示例
describe('useEffect', () => {
  it('should update document title', () => {
    const spy = jest.spyOn(document, 'setTitle');
    const wrapper = mount(<Counter />);
    wrapper.find('input').simulate('change', { target: { value: 'foobar' }});
    expect(spy).toHaveBeenCalledWith('Count: 0');
    wrapper.find('button').simulate('click');
    expect(spy).toHaveBeenCalledWith('Count: 1');
    spy.mockRestore();
  });
});

在测试中，我们首先使用 jest 的 spyOn 方法来监听 document.title 的变化，然后使用 mount 方法进行全渲染测试。

接着，我们模拟输入框中的值变化，验证 document.title 是否为初始值。

然后，点击 +1 按钮，再次验证 document.title 是否更新为正确的值。

最后，使用 mockRestore 方法还原 spy 对象，避免对其他测试的影响。

总结

使用 Enzyme 进行 React Hooks 的测试并不难，只需要学会使用它提供的简洁而强大的 API 即可。在编写 React Hooks 代码时，我们应该经常思考如何测试它们，从而保证代码的质量和稳定性。

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