React Testing Library条件渲染测试：如何Mock useState？

问题原因 #

你的TextComponent中，useEffect依赖为空数组，只会在组件挂载后异步执行。初始渲染时calculatedData为false，返回骨架屏；useEffect执行后才会把calculatedData设为true，渲染文本组件。第二个测试用例中同步调用getByTestId，此时组件还没完成状态更新，所以找不到目标元素。

不需要Mock useState，RTL推荐测试组件的实际行为而非内部状态，只需等待组件完成状态更新即可。

解决方案 #

方法1：使用findByTestId（异步查询） #

findByTestId是异步方法，会自动等待元素出现（默认超时1000ms），适合这种异步更新的场景：

test('render Component', async () => {
  const { findByTestId } = render(
    <Provider store={store}>
      <BrowserRouter>
        <TextComponent text="测试文本" />
      </BrowserRouter>
    </Provider>
  )
  const displayTextElement = await findByTestId('displayText')
  expect(displayTextElement).toBeInTheDocument()
})

方法2：用waitFor包裹断言 #

如果需要更灵活的等待逻辑，可使用waitFor：

import { waitFor } from '@testing-library/react'

test('render Component', async () => {
  const { getByTestId } = render(
    <Provider store={store}>
      <BrowserRouter>
        <TextComponent text="测试文本" />
      </BrowserRouter>
    </Provider>
  )
  await waitFor(() => {
    expect(getByTestId('displayText')).toBeInTheDocument()
  })
})

额外优化：修复组件逻辑小问题 #

你的useEffect依赖为空数组，但内部用到了text，这会导致text更新时useEffect不会重新执行。如果需要在text变化时重新判断，应该把text加入依赖数组：

useEffect(() => {
  if (text) {
    setCalculatedData(true)
  } else {
    setCalculatedData(false) // 可选：文本为空时回到骨架屏
  }
}, [text]) // 添加text到依赖

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