如何使用 Jest 检查是否包含 window.location.href（React 组件）的其他条件

Question

我刚开始使用带有 .spec.js 后缀的文件来通过 Jest 测试文件，所以希望这不是一个愚蠢的问题。我没有通过 Google + Whosebug 研究找到任何东西。

我想使用 jest 检查包含新 window.location 的 if else 条件。

这是我的 file.ts

export const loadBSection = (bSectionId: string) => async (
  dispatch: Dispatch,
  getState: GetState,
  { bSectionApi }: Deps,
) => {
  try {
    ...
  } catch (e) {
    dispatch(setBSectionErrorMessage(e.message));
    if (e.response.status === 404) {
      window.location.href = '/page-not-found.html';
    }
  }
};

我的file.spec.ts

it('should .. and forward to a 404 page', async () => {
    ...
    expect(store.getActions()).toEqual([setBSectionLoading(true), setBSectionErrorMessage(errorMessage)]);

    // TODO what is expected here?
    
  });

你有什么想法吗？

由于我是新手，也许你有一些深入研究的资源？

我使用：https://create-react-app.dev/docs/running-tests/ 作为介绍。您是否有其他资源可以帮助您在将来找到一些文档？

Answer 1

我有一个想法但不确定是否可行

Object.defineProperty(window.location, 'href', {
  writable: true,
  value: '/page-not-found.html',
});

Answer 2

解决了！

因此将 response 设置为可选的很有用，这样其他错误也能被捕获。此外，模拟函数更容易，所以我将 window.location.href 更改为 window.location.assign(url)。相同但更容易测试。

file.ts

catch (e) {
    dispatch(setBSectionErrorMessage(e.message));
    if (e.response?.status === 404) {
      window.location.assign('/page-not-found.html');
    }
  }

file.spec.ts

我正在测试方法中创建 error 和 errorMessage。在这里您可以看到如何将错误对象与状态代码组合在一起作为响应：

it('should navigate to /page-not-found.html ...', async () => {
    const bSectionIdMock = '123';
    const error = Object.assign((new Error(), { response: { status: 404 } }));
    bSectionApi.bSectionsBSectionIdGet.mockRejectedValue(error);

    window.location.assign = jest.fn();

    await store.dispatch(loadBSection(bSectionIdMock));

    expect(window.location.assign).toHaveBeenCalledWith('/page-not-found.html');
  });

如何使用 Jest 检查是否包含 window.location.href（React 组件）的其他条件

How to check if else conditions containing window.location.href (React Component) using Jest

unit-testing

typescript

reactjs

jestjs

ts-jest