React 组件的状态在 Jest 单元测试中未更新

Question

我有一个简单的表单作为 React 组件。单击按钮后，将调用handleSubmit()，该方法会进行标注，并在标注成功时清除表单。我尝试进行 Jest 单元测试来测试表单在提交后是否被清除。

it('handles form submission', () => {
    Amplify.API.post = jest.fn().mockImplementation(() => Promise.resolve());
    EventEmitter.emit = jest.fn().mockImplementation(() => Promise.resolve());

    wrapper.setState({
        diocese: {
            name: 'My New Diocese',
            id: '123',
            generalCollectionOnly: false,
            aggregatePayments: false,
            aggregatePledges: false,
        },
    });

    footer.children().find(Button).at(1).simulate('click');
    expect(wrapper.state().diocese.name).toEqual('');
});

调试后，我可以看到表单已成功提交并调用了 this.setState()：

this.setState(() => ({
    diocese: {
        id: '',
        name: '',
        generalCollectionOnly: false,
        aggregatePledges: false,
        aggregatePayments: false,
    },
    isLoading: false,
}));

然而，expect 语句失败，因为名称仍然显示“我的新教区”，即使它应该被清除。经过一些研究后，我认为更新包装器会有所帮助：

wrapper.update();

但是，它仍然显示组件的状态尚未清除。为什么测试中状态没有更新？

Answer 1

感谢您的反馈。该问题是由handleSubmit()执行异步工作引起的。await在 Jest 单元测试中添加修复了该问题。测试如下：

it('handles form submission', async () => {
    Amplify.API.post = jest.fn().mockImplementation(() => Promise.resolve());
    EventEmitter.emit = jest.fn().mockImplementation(() => Promise.resolve());
    wrapper.setState({
        diocese: {
            name: 'My New Diocese',
            id: '123',
            generalCollectionOnly: false,
            aggregatePayments: false,
            aggregatePledges: false,
        },
    });
    await footer.children().find(Button).at(1).simulate('click');
    expect(wrapper.state().diocese.name).toEqual('');
});

现在测试通过了。