Шпионить за методом редукции

Question

Я новичок в шутке, и я пишу юнит-тесты для моего приложения реагирования, которое использует избыточный код и написано с использованием Typescript.

У меня есть контейнерный компонент с этим фрагментом кода:

const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
    onSelectScenario: (selectedScenario: any) => {
        dispatch(selectScenario(selectedScenario));
    }
});

Я хочу написать модульный тест, проверяющий, что когда я вызываю эту опору из теста (onSelectScenario), dispatch метод будет вызываться с правильными параметрами.

Любая идея, как шпионить за этим dispatch?

Это мой модульный тест, в котором я называю метод prop:

it('should dispatch', () => {
    component.props().onSelectScenario('New Selected Scenario');
});

И это настройка тестов, где я определяю свой контейнерный компонент, предоставляющий проверенное хранилище:

const mockStore = configureMockStore();
let store = mockStore({
    scenarios: ['Scenario 1', 'Scenario 2']
});
let component: ShallowWrapper<any, any>;

describe('ScenarioListGroupContainer Component', () => {
    beforeEach(() => {
        component = shallow(<ScenarioListGroupContainer store={store} />);
    });
    // ...
});

Answer 1

Наилучшее решение, которое я нашел до сих пор (любое лучшее предложение более чем приветствуется), заключается в следующем, сохраняя точно такой же код, который указан в моем вопросе:

it('should dispatch the select scenario action', () => {
    component.props().onSelectScenario('New Selected Scenario');
    expect(store.getActions()).toEqual([{ 
        type: 'SELECT_SCENARIO', 
        selectedScenario: 'New Selected Scenario' 
    }]);
});

Таким образом, вы вручную вызываете свой реквизит, а затем проверяете, правильно ли было отправлено действие в магазине.

Answer 2

Если это кому-то поможет, вот что я использую:

const spy = jest.spyOn(store, 'dispatch');

Answer 3

Я слышу тебя @quirimmo. Вот как я это делаю.

В компоненте -

export const mapDispatchToProps = (dispatch) => ({
  onAction : (data) => dispatch(someAction()),
});

В тесте - импортировать {mapDispatchToProps} из './component'; import {someAction} из './actions';

const actions = [ someAction() ];
const mockDispatch = (action) => action; // just echo the action
const mockMDTP = mapDispatchToProps(mockDispatch);
Object.keys(mockMDTP).forEach((key) => {
   expect(actions.contains(mockMDTP[key]())).toBe(true);
  });
});

Пояснение -

1. Создает массив действий. Это будет содержать все структуры действий в MDTP.
2. Затем издевается и эхо рассылки.
3. Проверяет ключи объекта на соответствие массиву действий.

Надеюсь это поможет!