如何在反应测试库中测试 useEffect - Javascript

React useEffect 钩子是一个非常强大的工具，使开发人员能够使用函数组件来操作组件的生命周期方法。在测试组件时，我们需要使用 mock 的方式来测试 useEffect。本文将介绍如何在反应测试库中测试 useEffect。

准备

在开始之前，我们需要安装以下依赖：

• @testing-library/react
• jest

npm install --save-dev @testing-library/react jest

了解 useEffect

在测试 useEffect 之前，我们需要了解它的工作原理。useEffect 钩子接收两个参数，第一个参数是一个回调函数，在组件挂载后执行此函数。第二个参数是一个数组，其中包含了将影响此回调函数的变量或状态。如果第二个参数为空，则 useEffect 只会在组件挂载时执行一次。

下面是一个例子：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`You clicked ${count} times`);
  }, [count]);

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </>
  );
};

在上面的代码中，我们使用了 useEffect 钩子来记录用户单击按钮的次数。每次单击按钮时，count 值会更改，useEffect 将会被重新调用，并且我们将会在控制台上看到一条新记录。

测试 useEffect

在测试 useEffect 时，我们需要 mock 它的实现。这意味着我们需要在组件渲染之前定制 useEffect，并且需要在每次更改状态时检查它是否被调用。为了完成所有这些操作，我们需要使用 Jest 提供的 mock 函数。

下面是一个例子：

import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  const useEffect = jest.spyOn(React, 'useEffect');
  const mockUseEffect = () => useEffect.mockImplementationOnce(cb => cb());

  afterEach(() => {
    useEffect.mockClear();
  });

  it('should render', () => {
    render(<MyComponent />);
  });

  it('should call useEffect', () => {
    mockUseEffect();
    const { getByText } = render(<MyComponent />);
    fireEvent.click(getByText('Click me'));

    expect(useEffect).toHaveBeenCalled();
  });
});

在上面的代码中，我们首先创建了一个 spy 来获取 React 对象上 useEffect 的实现。我们还创建了一个 mock 函数，它将以每次调用 useEffect 的方式来工作。

在测试的第一个测试中，我们只需要检查组件是否正常渲染，因此我们只需要使用 render 函数即可。

在第二个测试中，我们首先调用了 mock 函数，然后再次渲染了组件。之后，我们单击按钮，这会导致 count 值发生更改，useEffect 也会被重新调用。

最后，我们检查 useEffect 是否被调用了。

结论

在本文中，我们介绍了如何使用反应测试库测试 useEffect。我们使用了 Jest 的 mock 函数来 mock useEffect，并在每次更改状态时检查它是否被调用。这种方法可以确保我们的应用程序的 useEffect 钩子被正确测试。