Vitest测试中React组件请求后未重新渲染的问题排查

1. 先检查计时器设置 #

Vitest默认可能启用了fake timers，这会卡住真实的网络请求（属于宏任务）。如果你的全局配置开了fake timers，得在当前测试用例里临时切换回真实计时器：

test('EntryDetail 渲染真实接口返回的文章内容', async () => {
  vi.useRealTimers(); // 临时用真实计时器
  // 测试逻辑
  vi.useFakeTimers(); // 测试完恢复原设置
});

2. 用waitFor或findBy*替代flushPromises #

flushPromises只能处理微任务队列里的Promise，而真实网络请求是宏任务，没法靠它触发组件重渲染检测。改用Testing Library的waitFor轮询DOM变化，或者直接用findBy*方法（它是getBy*+waitFor的封装）：

用waitFor的写法 #

import { render, waitFor } from '@testing-library/react';
import EntryDetail from './EntryDetail';

test('EntryDetail 正确渲染真实接口返回的标题', async () => {
  const { getByText } = render(<EntryDetail articleId="123" />);
  
  // 等待标题出现，超时时间可自定义，默认是1000ms，真实请求可能需要更长
  await waitFor(() => {
    expect(getByText('真实接口返回的文章标题')).toBeInTheDocument();
  }, { timeout: 5000 });
});

用findBy*的简洁写法 #

import { render, screen } from '@testing-library/react';
import EntryDetail from './EntryDetail';

test('EntryDetail 渲染真实接口返回的标题', async () => {
  render(<EntryDetail articleId="123" />);
  
  // 直接等待元素出现
  const titleElement = await screen.findByText('真实接口返回的文章标题', { timeout: 5000 });
  expect(titleElement).toBeInTheDocument();
});

3. 确认组件state更新逻辑没问题 #

检查你的EntryDetail组件，确保接口返回数据后正确更新了state：

// 示例组件逻辑
import { useEffect, useState } from 'react';
import { getArticleDetail } from './api';

function EntryDetail({ articleId }) {
  const [article, setArticle] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await getArticleDetail(articleId);
        setArticle(res.data); // 这里必须正确把接口数据赋值给state
      } catch (err) {
        console.error(err);
      }
    };
    fetchData();
  }, [articleId]);

  if (!article) return <div>Loading...</div>;

  return <h1>{article.title}</h1>;
}

export default EntryDetail;

如果这里state更新出错（比如没取到res.data，或者赋值错了），就算请求成功也不会触发重渲染。

4. 解决跨域问题 #

如果真实接口和测试环境跨域，jsdom会报CORS错误。可以在Vitest配置里加代理：
在vitest.config.js中：

export default defineConfig({
  test: {
    server: {
      proxy: {
        '/api': {
          target: 'https://你的真实接口域名.com',
          changeOrigin: true,
        },
      },
    },
  },
});

这样测试时请求/api/article/detail会被代理到真实接口，绕开CORS限制。

内容的提问来源于stack exchange，提问作者Daniel Tkach