如何用Vitest测试useEffect？模拟请求场景下的测试难题

首先明确：直接测试React.useEffect的调用不是React组件测试的最佳实践，React测试更关注组件的外部可见行为（比如数据请求、DOM渲染、状态变化）而非内部钩子的执行。以下是具体可行的方案：

1. 测试模拟请求函数的调用（推荐） #

既然你的组件里useEffect原本是用来调用getTestimonials的，哪怕现在注释了，恢复这个逻辑后，直接mock这个请求函数并断言它的调用，比监听useEffect更有意义：

// 测试文件
import { render } from '@testing-library/react';
import { vi } from 'vitest';
import Testimonials from './Testimonials';
import { getTestimonials } from './your-api-path';

// 完全mock请求函数
vi.mock('./your-api-path', () => ({
  getTestimonials: vi.fn().mockResolvedValue([{ id: 1, content: 'Test' }])
}));

test('triggers getTestimonials on component mount', async () => {
  render(<Testimonials />);
  // 断言请求函数被调用
  expect(getTestimonials).toHaveBeenCalledTimes(1);
});

如果暂时不想恢复请求逻辑，也可以给useEffect设置一个可观测的副作用（比如更新组件状态），然后测试状态变化对应的DOM输出。

2. 通过副作用的间接结果验证useEffect执行 #

如果一定要确认useEffect是否执行，可以测试它带来的实际影响：

• 比如组件在useEffect里更新了某个状态，那测试DOM是否渲染了该状态对应的内容；
• 或者在useEffect里调用了某个工具函数，mock这个工具函数并断言调用。

举个例子，假设组件里useEffect会更新testimonials状态：

// Testimonials组件
import { useState, useEffect } from 'react';
import { getTestimonials } from './api';

export default function Testimonials() {
  const [testimonials, setTestimonials] = useState([]);

  useEffect(() => {
    console.log('useEffect ran');
    // 恢复请求逻辑
    const fetchData = async () => {
      const data = await getTestimonials();
      setTestimonials(data);
    };
    fetchData();
  }, []);

  return (
    <div className="testimonials">
      {testimonials.map(t => <div key={t.id}>{t.content}</div>)}
    </div>
  );
}

对应的测试可以断言DOM是否渲染了mock的数据：

test('renders testimonials after fetch', async () => {
  const { findByText } = render(<Testimonials />);
  // 等待异步请求完成并渲染
  const testimonialElement = await findByText('Test');
  expect(testimonialElement).toBeInTheDocument();
});

3. 排查测试环境配置问题 #

如果之前尝试spyuseEffect无效，可能是测试环境配置不对：

• 确保Vitest配置里设置了environment: 'jsdom'；
• 确认没有在测试中使用了React的生产版本（生产环境下React会优化钩子，导致spy失效）；
• 避免直接mockReact.useEffect，React内部对钩子做了封装和优化，直接监听底层方法通常不会生效。

内容的提问来源于stack exchange，提问作者Lucas Sales