嘲笑useReducer's储存在Jest/Ezyme内，不含进口还原剂

Question

我正在尝试编写一个测试，该测试涉及更新名为<Dashboard />的组件的useReducer状态。

const [store, dispatch] = useReducer(reducer, dashboardStore);

在测试中，我希望能够更新store。

const wrapper = mount(<Dashboard />); // <Dashboard /> contains the useReducer
...
it('example test', () => {
let mockStore = ['first item'];
mockStore.push('second item');
expect(wrapper.find(Dashboard).find('input').props().value.toBe('second item');
});

在示例测试中，我有一些伪代码模拟store，然后向其推送一个值。然后我检查该组件中的另一个子元素是否根据store的更改进行了更新。

这可能吗？我需要将useReducer导入测试文件吗？

Answer 1

如果重构Dashboard以使用依赖注入，则可以将存储的初始状态提供为道具：

function Dashboard({dashboardStore}) {
...
const [store, dispatch] = useReducer(reducer, dashboardStore);
...
}

然后，您可以在测试中提供模拟商店作为道具：

let mockStore = ['first item'];
mockStore.push('second item');
const wrapper = mount(<Dashboard dashboardStore={mockStore} />);

否则，如果这不可能，那么在测试中只能嘲笑useReducer。