javascript - 使用 Jest 测试窗口重新加载 Redux reducer

Question

我有一个返回 window.location.reload() 的 reducer 。它由单击按钮时调用的 Action 创建器触发。

我试图在 Jest 中模拟这个功能，并能够在 reducer 中测试它，返回一个窗口重新加载。我如何有效地对此进行模拟？

我认为这是一个很好的话题，因为测试重新加载可能适用于许多其他复杂情况。对于我来说，在 Redux 中不涉及它可能很容易，只需将它直接移动到按钮 React 组件(它的 React)的按钮 onClick() 属性。

但是，我仍然想知道在 Jest 中模拟窗口方法的最佳方式是什么，其他人也可以。

这是我得到的:

Action

export const cancelEdits = () => ({
    type: CANCEL_EDITS,
});

reducer

case Actions.CANCEL_EDITS:
    return window.location.reload();

开 Jest

import * as Actions from "wherever";
it("should handle CANCEL_EDITS", () => {
    const action = { type: Actions.CANCEL_EDITS };
    const mockFn = jest.fn().mockImplementation(() => window.location.reload());
    expect(commonReducer(state, action)).toEqual(mockFn);
});

我正在模拟在 reducer 中被触发的 Action ，然后测试它是否等同于 Jest 模拟函数，它返回一个 window.location.reload()

然而，我想到的另一个选择是用 redux-mock-store 模拟一个商店，并让它调度 cancelEdits() Action 创建者，它应该启动操作，然后在 reducer 测试文件中，我会断言 mockFn 是这样调用的:

store.dispatch(Actions.cancelEdits()) 期望(mockFn).toHaveBeenCalled()

但不确定这是否可行。我也知道 jest.spyOn() 方法，但如何实现它？

任何关于此的信息都会很棒!

Answer 1

使用 jest.fn(implementation)创建模拟方法并在 window.location

上替换它们

例如

reducer.js:

import * as Actions from './actions';

export function commonReducer(state, action) {
  switch (action.type) {
    case Actions.CANCEL_EDITS:
      return window.location.reload();
    default:
      return state;
  }
}

actions.js:

export const CANCEL_EDITS = 'CANCEL_EDITS';

export const cancelEdits = () => ({
  type: CANCEL_EDITS,
});

reducer.test.js:

import { commonReducer } from './reducer';
import * as Actions from './actions';

describe('47704309', () => {
  it('should handle CANCEL_EDITS', () => {
    const state = {};
    const action = { type: Actions.CANCEL_EDITS };
    const mReload = jest.fn();
    window.location.reload = mReload;
    expect(commonReducer(state, action)).toEqual(undefined);
    expect(mReload).toBeCalledTimes(1);
  });

  it('should handle default case', () => {
    const state = {};
    const action = { type: '' };
    expect(commonReducer(state, action)).toEqual({});
  });
});

带有覆盖率报告的单元测试结果:

 PASS  src/stackoverflow/47704309/reducer.test.js (8.958s)
  47704309
    ✓ should handle CANCEL_EDITS (6ms)
    ✓ should handle default case (1ms)

------------|----------|----------|----------|----------|-------------------|
File        |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------|----------|----------|----------|----------|-------------------|
All files   |     87.5 |      100 |       50 |      100 |                   |
 actions.js |    66.67 |      100 |        0 |      100 |                   |
 reducer.js |      100 |      100 |      100 |      100 |                   |
------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        10.308s

源代码:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/47704309