React 测试库，如何测试 history.push

Question

在 React 应用程序中，我有一个以编程方式转到新网址的按钮：

<ComposeButton
  onClick={() => {
    history.push('some-link'))
  }}
>

在我的测试中，我按照 React Router 的 react-testing-library 文档中的说明渲染我的组件：

const renderComponent = (page: Pages) => {
  const history = createMemoryHistory()

  return renderWithState(
    <MockedProvider
      mocks={mocks}
      addTypename={false}
      defaultOptions={{
        watchQuery: { fetchPolicy: 'no-cache' },
        query: { fetchPolicy: 'no-cache' }
      }}
    >
      <Router history={history}>
        <ComponentToRender />
      </Router>
    </MockedProvider>
  )
}

如何在 react-testing-library 中等待这个更改页面？

it('sends invitations', async () => {
    const { getByTestId, queryByTestId, debug, getByText } = renderComponent(
      Pages.contacts
    )

    await new Promise((resolve) => setTimeout(resolve))

    const writeMessageBtn = getByTestId('write-message-btn')
    waitFor(() => fireEvent.click(writeMessageBtn))
    await new Promise((resolve) => setTimeout(resolve))

    waitFor(() => debug()) // <- expect to see new page

    getByText('EV_305_NEW_INVITATION_SEND') // <- this is in the second page, never get here
})

使用debug时，我永远看不到新页面的内容（点击按钮后）

Answer 1

我不确定这是否会使一切正常，但我可以强调一下您分享的代码示例存在一些问题：

1. 您正在渲染Router，但没有渲染Routes。请改用MemoryRouter 并提供与您的实际应用程序相同的路由 - 至少提供您要推送到历史记录中的路由

2. 您没有正确使用react-testing-library。不要使用getByTestId，而是使用findByTestId。例如const writeMessageBtn = await findByTestId('write-message-btn')。区别在于get* 查询是同步的，而find* 是异步的。您无需等待任意超时，测试库将尝试查找元素几秒钟。 这同样适用于您使用get*的其他地方