测试一个函数但没有得到 .toHaveBeenCalled() 方法的正确结果

Question

我正在测试以下功能：

onSubmit = e => {
        e.preventDefault()
        if (!this.state.measureURI) return
        this.setState({ foodId: this.props.food.foodId }, () => this.props.fetchServing({
            quantity: parseInt(this.state.quantity),
            measureURI: this.state.measureURI,
            foodId: this.state.foodId
        }))
    }

测试：

    test('should test onSubmit prop for valid form submission', () => {
        const onSubmit = jest.fn()
        const fetchServing = jest.fn()
        const arg = {
            quantity: expect.any(Number),
            measureURI: expect.any(String),
            foodId: expect.any(Number)
        }
        const wrapper = shallow(<ServingForm food={food} onSubmit={onSubmit} fetchServing={fetchServing} />)
        wrapper.find('form').simulate('submit', {
            preventDefault: () => { }
        })
        expect(fetchServing).toHaveBeenCalled()
    })

但是，我收到以下错误：

● <ServingForm /> › should test onSubmit prop for valid form submission
    expect(jest.fn()).toHaveBeenCalled()
    Expected number of calls: >= 1
    Received number of calls:    0
      37 |             preventDefault: () => { }
      38 |         })
    > 39 |         expect(fetchServing).toHaveBeenCalled()
         |                              ^
      40 |     })
      41 | 
      42 | })

我做错了什么？

我正在使用 jest 和酶对间谍进行单元测试。

Answer 1

您的测试代码永远不会到达fetchServing 调用，因为this.state.measureURI 没有值，所以它只是在那个时候返回。我对酶不熟悉，但根据docs，wrapper 具有setState 功能，因此您可以：

wrapper.setState({ measureURI: 'whatever' });