函数中的Jest嘲讽函数

Question

所以我想测试一下我的表单是否调用了handle submit函数。它击中了下图所示的条件，阻止了表单的提交。我如何去模拟里面的validate函数，使其返回一个空对象{}。这将使我的表单有效，然后按要求提交。

在form.jsx中，validate是在表单组件之外定义的。我把它导出为export const validate = {}。

    handleSubmit = event => {
        const {args} = this.state;
        let errors = validate(args);
        const isValid = isEmpty(errors)
        if(!isValid) {
            this.setState({args: args})
            event.preventDefault()
        }
        this.setState({args: args})
    }

我的尝试

    it('should handleSubmit when form is submitted', () => {
        const fakeValidate = { validate: () => true };
        const handleSubmit = jest.fn().mockImplementation((cb) => () => cb({ test: 'test' }));
        const wrapper = shallow(<Form form="test" onSubmit={handleSubmit}/>);
        wrapper.find('form').simulate('submit', fakeValidate);
        expect(handleSubmit).toBeCalledTimes(1);
    });

谢谢！所以我想测试一下我的表单中是否调用了提交句柄函数。

Answer 1

不可能对一个在它使用的同一个模块中定义的函数进行嘲讽。为了能够被模拟，它应该从另一个模块中导入，然后用以下方法模拟 jest.mock的方法，或者作为某个对象上的方法使用，并用 jest.spyOn.

由于它是和类组件一起使用的，所以它可以被定义为一个方法。

validate() {...}

handleSubmit = event => {
    ...
    let errors = this.validate(args);
    ...
}

并在类上或组件实例上被嘲讽：

jest.spyOn(Form.prototype, 'validate').mockReturnValue(...);

或组件的实例上被嘲弄:

jest.spyOn(wrapper.instance(), 'validate').mockReturnValue(...);

如果 validate 是可重用的或与功能组件一起使用的，应将其移至其他模块。