javascript - 如何在测试之间重置 redux-test-utils 存储

Question

我有一个订阅者，它根据提供给 pub 事件的参数调度操作

// subscriptions.js
import store from '../store';
import { action } from '../actions';
export const subscribeToToggle = () => {
    window.$.subscribe('action/toggle', (_e, isToggleOn) => {

        if (isToggleOn=== true){
            store.dispatch(action());
        }
    });
};

在我的测试文件中，我编写了 2 个测试，测试仅在提供 true 时才发送操作。

// subscriptions.test.js
import { subscribeToToggle } from './subscriptions';
import jQuery from 'jquery';
import { actionTypes } from '../constants';
import store from '../store';
jest.mock('../store');

beforeEach(() => {
    window.$ = jQuery;
    window.$.unsubscribe('action/toggle');

});

test('Action not sent when false', () => {

    subscribeToToggleOpen();
    window.$.publish('action/toggle', false);

    expect(store.getActions().length).toBe(0);
});

test('Action sent when true', () => {

    subscribeToToggleOpen();
    window.$.publish('action/toggle', true);

    expect(store.getActions().length).toBe(1);
    expect(store.getActions()[0].type).toBe(actionTypes.ACTION);
});

我使用 redux-test-utils 有以下模拟商店

import { createMockStore } from 'redux-test-utils';
let store = null;
store = createMockStore('');
export default store;

我面临的问题是，只有当错误测试首先出现时，我的测试才会通过。如果它们是相反的方式，“错误时未发送操作”测试将失败，因为它看到“正确时发送的操作”测试提供的操作。

有什么方法可以让我使用 beforeEach 方法来重置模拟的商店对象吗？

Answer 1

在这种情况下，问题在于您的商店本质上是一个单例。当您尝试执行此类操作时，这可能会产生问题，并且通常是一种反模式。

与其导出商店对象，不如导出一个可以调用以获取商店的 getStore() 函数，这可能会更好。在这种情况下，您可以这样做:

getStore().dispatch(action());

在其中，您可以使用其他辅助函数来替换它返回的存储。该文件可能如下所示:

import { createMockStore } from 'redux-test-utils';
let store = createMockStore('');

export default () => store;

然后，在其中，您可以添加另一个，它可以是 resetStore 作为非默认导出:

export const resetStore = () => store = createMockStore('');

从技术上讲，它仍然是一个单例，但现在它是一个您可以对其进行一定控制的单例。

然后，在测试中的 beforeEach() 中，只需调用 resetStore():

import { resetStore } from '../store';

beforeEach(() => {
  resetStore();
});

这还需要您更新实际代码以使用 getStore() 而不是直接使用 store，但从长远来看，这可能是一个有益的更改.

<小时/>

完整更新版本:

// subscriptions.js
import getStore from '../store';
import { action } from '../actions';
export const subscribeToToggle = () => {
    window.$.subscribe('action/toggle', (_e, isToggleOn) => {

        if (isToggleOn=== true){
            getStore().dispatch(action());
        }
    });
};

<小时/>

// subscriptions.test.js
import { subscribeToToggle } from './subscriptions';
import jQuery from 'jquery';
import { actionTypes } from '../constants';
import getStore, { resetStore } from '../store';
jest.mock('../store');

beforeEach(() => {
    window.$ = jQuery;
    window.$.unsubscribe('action/toggle');
    resetStore();
});

test('Action not sent when false', () => {
    subscribeToToggleOpen();
    window.$.publish('action/toggle', false);

    expect(getStore().getActions().length).toBe(0);
});

test('Action sent when true', () => {

    subscribeToToggleOpen();
    window.$.publish('action/toggle', true);

    expect(getStore().getActions().length).toBe(1);
    expect(getStore().getActions()[0].type).toBe(actionTypes.ACTION);
});

<小时/>

import { createMockStore } from 'redux-test-utils';
let store;

export const resetStore = () => { store = createMockStore(''); }

resetStore(); // init the store, call function to keep DRY

export default () => store;

<小时/>

除此之外，另一种方法是使用一个全局 reducer ，它可以将存储的状态重置为默认状态，但这会更困惑，而且我真的认为通常不适合编写单元测试。