reactjs - React 测试库 - 组件未使用更新的数据呈现并导致测试用例中的超时错误

Question

当我在浏览器上运行应用程序时，以下问题运行良好。但在我的测试用例中，它导致: Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout

我的代码看起来类似于下面的代码片段-

我的组件.tsx

useEffect(() => {
 // set state after fetching data from api
}, [location.search])

MyComponent.test.tsx

it("Test reload data", async () => {
    const history = createMemoryHistory()
    render(
      <Router history={history}><MyComponent /></Router>
    )

    await waitForElementToBeRemoved(() =>
      screen.getByTestId("loading")
    )
    let btn = await waitFor(() =>
      screen.getByRole("button", { name: /abc/ })
    )
    fireEvent.click(btn)

    // here query param is changed by history.push() on click and component is re-rendered. 
    // However, the re-rendered component doesn't update with new data in test case.
    
    // this below doesn't work and leads to timeout error  
    let newBtns = await waitFor(() => screen.getAllByRole("button"))
    expect(newBtns).toHaveLength(newLength)
  })

我已经通过控制台验证了新数据是从模拟 api 获取的，但它没有被渲染。因此我无法获得新按钮。请帮忙。