React组件测试：如何在渲染前获取服务端数据或Mock接口？

一、Mock接口（推荐用于单元测试） #

这是前端测试里最常用的方案，无需依赖真实服务端，能避免环境不稳定影响测试结果。

• 用msw（Mock Service Worker）拦截/home接口请求，返回模拟数据：

  // src/mocks/server.js
  import { setupServer } from 'msw/node'
  import { rest } from 'msw'
  
  export const server = setupServer(
    rest.get('/home', (req, res, ctx) => {
      return res(ctx.json({ message: 'welcome' }))
    })
  )
  
  // 测试文件中
  import { server } from './mocks/server'
  
  beforeAll(() => server.listen())
  afterEach(() => server.resetHandlers())
  afterAll(() => server.close())
  
  test('渲染welcome文本', async () => {
    render(<App />)
    // 等待异步数据加载完成后查找元素
    const welcomeOption = await screen.findByText('welcome')
    expect(welcomeOption).toBeInTheDocument()
  })
  

• 也可以用Jest直接mock全局fetch：

  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve({ message: 'welcome' })
    })
  )
  
  test('渲染welcome文本', async () => {
    render(<App />)
    const welcomeOption = await screen.findByText('welcome')
    expect(welcomeOption).toBeInTheDocument()
    expect(fetch).toHaveBeenCalledWith('/home')
  })
  

二、使用真实服务端数据（适用于集成测试） #

如果一定要用真实接口数据，需确保测试时服务端已启动并能正常响应/home接口：

1. 测试前启动本地测试服务（比如用npm run start:test启动专门的测试环境服务）
2. 测试代码中必须等待异步请求完成——因为useEffect是组件挂载后异步执行的，初始渲染时没有数据：

   test('渲染真实服务端返回的welcome文本', async () => {
     render(<App />)
     // 等待接口返回数据后渲染元素
     const welcomeOption = await screen.findByText('welcome')
     expect(welcomeOption).toBeInTheDocument()
   })
   

   注意：这种方式完全依赖服务端稳定性，若服务端故障或接口返回变更，测试会直接失败，因此一般只在集成测试场景中使用。

总结 #

两种方案都可行：

• 单元测试优先选Mock接口，速度快、不依赖外部环境，专注验证组件逻辑
• 集成测试可以用真实服务端数据，验证组件与服务端的交互是否正常

内容的提问来源于stack exchange，提问作者Manu Chadha