I'm looking for some help with testing component. In my case in the effect I'm doing this:
useEffect(() => {
if (lodashHas(meetings[0], 'id')) {
history.push(`${routes.zoomMeetings}/${meetings[0].id}`);
}
}, [meetings, key]);
I would like to wait until this effect applies and make testing. However, when I'm testing it with:
expect(window.location.pathname).toBe(`${routes.zoomMeetings}/${meetingsListInfo.meetings[0].id}`)
It still shows me / as a path instead of proper pathname. When I'm console logging I can see in the terminal the effect is working. It feels like the test is not waiting for this effect to evaluate before doing assertions.
I'm using useHistory from react-router-dom like the following:
const history = useHistory();
In my tests I'm trying to mock history.push(). I've managed to solve it by doing this in my test:
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);
});
This way I can test assertions properly.