React 测试库条件渲染

Question

我如何在测试库中有条件地进行测试：渲染加载组件骨架正在工作但不知道如何模拟 useState？

const TextComponent = ({text}: WidgetProps): ReactElement => {

  const [calculatedData, setCalculatedData] = useState(false)
 useEffect(() => {
    if (text) {
      setCalculatedData(true)
    }
  }, [])

  if (!calculatedData) return <Skeleton className="skeleton-profile" />
  return (
     <div data-testid="displayText">
       {text}
     </div>
)
}

组件.test.tsx

describe('basic render', () => {
  test('render skeleton', async () => {
    const {container} = render(
      <Provider store={store}>
        <BrowserRouter>
          <TextComponent text={text} />
        </BrowserRouter>
      </Provider>
    )
    expect(container.getElementsByClassName('skeleton-profile').length).toBe(1)
  })
  test('render Component', async () => {
    const {getByTestId} = render(
      <Provider store={store}>
        <BrowserRouter>
          <TextComponent text={text} />
        </BrowserRouter>
      </Provider>
    )
    expect(getByTestId('displayText')).toBeInTheDocument()
  })
})

我得到的错误是： TestingLibraryElementError: Unable to find an element by: [data-testid="displayText"]

Answer 1

我认为您的组件不需要本地 state 来处理此逻辑。 您的text道具与您的calculatedData state 基本相同。删除本地 state 和useEffect并直接使用道具作为条件会更有意义，这样也更容易测试：

const TextComponent = ({text}: WidgetProps): ReactElement => {

  return text ? (
    <div data-testid="displayText">{text}</div>
  ) : (
     <Skeleton className="skeleton-profile" />
  )
}

然后在你的测试文件中你只需要编写 2 个测试用例：

• 如果文本是真实的，它会呈现文本（将真实值作为text道具传递给测试中的组件）
• 它在文本为假时呈现骨架组件（将假值作为text道具传递给测试中的组件）