如何使用Jest+Enzyme测试React的useState与useEffect Hooks？

我完全懂你测试这段Hooks逻辑时的困惑——尤其是当useEffect的依赖项和内部的setState交织在一起时，很容易陷入触发循环或者测试断言失败的窘境。咱们先拆解你的代码逻辑，再一步步写出靠谱的测试用例。

首先，先明确你的代码逻辑：

const [sPlaceholder, setSPlaceholder] = useState('');
useEffect(() => {
setSPlaceholder('abcd');
if (s === '') {
dispatchUpdateSPlaceholder(searchPlaceholder);
}
}, [sPlaceholder]);

这段代码有个需要注意的点：useEffect依赖sPlaceholder，但内部又调用了setSPlaceholder，这会导致effect在初始渲染后触发两次（第一次sPlaceholder是空字符串，触发后设置为'abcd'；sPlaceholder更新后再次触发effect，但这次setSPlaceholder('abcd')和当前值一致，不会继续触发）。如果这不是你预期的行为，后面会给你调整建议。

第一步：准备测试环境 #

确保你的Enzyme适配了React Hooks，安装对应React版本的适配器（比如React 17用@wojtekmaj/enzyme-adapter-react-17），并且测试时用mount而不是shallow——shallow对Hooks的支持有限，mount能更准确地模拟组件的完整渲染周期。

第二步：编写测试用例 #

假设你的代码属于一个名为SearchComponent的组件，先把组件代码补全方便测试：

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

export const SearchComponent = ({ s, dispatchUpdateSPlaceholder, searchPlaceholder }) => {
  const [sPlaceholder, setSPlaceholder] = useState('');
  
  useEffect(() => {
    setSPlaceholder('abcd');
    if (s === '') {
      dispatchUpdateSPlaceholder(searchPlaceholder);
    }
  }, [sPlaceholder]);

  return <span data-testid="placeholder">{sPlaceholder}</span>;
};

接下来是测试代码：

import React from 'react';
import { mount } from 'enzyme';
import { SearchComponent } from './SearchComponent';

describe('SearchComponent Hooks Behavior', () => {
  // 每次测试前重置mock函数
  let mockDispatch;
  beforeEach(() => {
    mockDispatch = jest.fn();
  });
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('初始化时将sPlaceholder设置为"abcd"', () => {
    const wrapper = mount(
      <SearchComponent
        s="test"
        dispatchUpdateSPlaceholder={mockDispatch}
        searchPlaceholder="default-placeholder"
      />
    );

    // 通过测试ID获取元素，断言文本内容
    expect(wrapper.find('[data-testid="placeholder"]').text()).toBe('abcd');
  });

  it('当s为空字符串时，调用dispatchUpdateSPlaceholder', () => {
    const testPlaceholder = 'empty-state-placeholder';
    mount(
      <SearchComponent
        s=""
        dispatchUpdateSPlaceholder={mockDispatch}
        searchPlaceholder={testPlaceholder}
      />
    );

    // 注意：因为effect会触发两次，所以mockDispatch会被调用两次
    // 如果想避免这种情况，需要调整原组件的依赖项（后面会说）
    expect(mockDispatch).toHaveBeenCalledWith(testPlaceholder);
    expect(mockDispatch).toHaveBeenCalledTimes(2);
  });

  it('当s不为空时，不调用dispatchUpdateSPlaceholder', () => {
    mount(
      <SearchComponent
        s="user-input"
        dispatchUpdateSPlaceholder={mockDispatch}
        searchPlaceholder="default-placeholder"
      />
    );

    expect(mockDispatch).not.toHaveBeenCalled();
  });
});

第三步：优化原组件的依赖项（可选但推荐） #

刚才提到的effect重复触发问题，其实是因为依赖项设置不合理——你的逻辑看起来是要根据s和searchPlaceholder的变化来执行操作，而不是sPlaceholder本身。调整依赖项后，既能避免不必要的重复触发，测试也会更简洁：

useEffect(() => {
  setSPlaceholder('abcd');
  if (s === '') {
    dispatchUpdateSPlaceholder(searchPlaceholder);
  }
}, [s, searchPlaceholder]); // 改为依赖s和searchPlaceholder

调整后，测试用例里的mockDispatch只会被调用一次，你可以把断言改成expect(mockDispatch).toHaveBeenCalledTimes(1)。

内容的提问来源于stack exchange，提问作者Kannan Thayumanavan