监视 redux 调度方法

Question

我是玩笑的新手，我正在为我的 React 应用程序编写单元测试，该应用程序使用 redux 并使用 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

如果它对任何人有帮助，这就是我正在使用的：

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

Answer 2

到目前为止我找到的最好的解决方案（任何更好的建议都非常受欢迎）如下，保留我的问题中提供的完全相同的代码：

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 3

我听到你@quirimmo。我就是这样做的。

在组件中 -

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

测试中- 从'./component'导入{mapDispatchToProps}； 从 './actions' 导入 {someAction};

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. 检查对象的键以匹配操作数组。

希望这有帮助！ 😇

Answer 4

我正在使用一些可以帮助你的东西：

test('we should be able to delete tickets in cart menu clicking on trash icon', async () => {
    const delSpy = vi.spyOn(store, 'dispatch')
    const slicedTickets = tickets.slice(0, 2)
    rerender(<CartMenu tickets={slicedTickets} />)

    const trashIcons = getAllByTestId('delete-button')
    await user.click(trashIcons[0])
    expect(delSpy).toHaveBeenCalledWith(deleteTicket(slicedTickets[0].id))
})