Question

我有一个简单的形式作为React组件。单击按钮后，将调用handleSubmit（），该调用将进行标注并在标注成功的情况下清除表单。我尝试进行Jest单元测试，以测试表单在提交后是否清除。

CoroutineScope

在调试之后，我可以看到表单已成功提交并调用this.setState（）：

    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('');
    });

但是，期望语句失败，因为即使应清除该名称仍显示“ My New Diocese”。经过研究后，我认为更新包装程序会有所帮助：

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

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

Answer 1

这是我与Jest和Enzyme一起编写的测试示例：您不需要setState，只需在示例中将一个模拟对象（例如“ 值””）传递给组件的包装器即可。然后，您应该知道基于传递的对象“ 值”中的属性和值的方式和组件。

it('Get Awerage Daily Wage label - Calculated', () => {
    const values = {
      wageEntryMethod: 'Calculated',
      grossWages: 45000,
      totalCommissioning: 4000,
      totalMileage: 1000,
      otherWages: 2000,
      totalDaysPaid: 220,
    }
    const wrapper = shallow(<AwerageDailyComponent values={values} />)
    expect(wrapper.find('label').text()).toEqual(
      '13. Average Daily Wage (([7]$45,000.00 + [9]$4,000.00 + [11]$1,000.00 + [12]$2,000.00) / [8]220):'
    )-
  })

Answer 2

感谢您的反馈。该问题是由handleSubmit（）执行异步工作引起的。在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('');
    });

现在测试通过。

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

2 个答案: