等待位置路径名在useEffect中更改并进行测试

Question

我在找一些测试组件的帮助。在我的例子中，我是这样做的：

  useEffect(() => {
    if (lodashHas(meetings[0], 'id')) {
      history.push(`${routes.zoomMeetings}/${meetings[0].id}`);
    }
  }, [meetings, key]);

我想等到这一效果适用并进行测试。但是，当我测试它时：

expect(window.location.pathname).toBe(`${routes.zoomMeetings}/${meetingsListInfo.meetings[0].id}`)

它仍然将/显示为路径，而不是正确的路径名。当我是控制台日志时，我可以在终端中看到效果正在起作用。在进行断言之前，测试似乎没有等待评估这一效果。

Answer 1

我使用的useHistory来自react-router-dom，如下所示：

const history = useHistory();

在我的测试中，我试图模仿history.push()。通过在我的测试中这样做，我成功地解决了这个问题：

import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';

let history;

const renderComponent = () => {
    history = createMemoryHistory();

    render(<Router history={history}><MyComponent /></Router>);
}

it('tests location changes', () => {
    renderComponent();

    const pushSpy = jest.spyOn(history, 'push');

    expect(pushSpy).toHaveBeenLastCalledWith(`some-route`);
    expect(pushSpy).toHaveBeenCalledTimes(1);
});

这样我就可以正确地测试断言。