函数内部的 Jest 模拟函数答案

【问题标题】：Jest mocking function inside function函数内部的 Jest 模拟函数
【发布时间】：2020-06-07 18:05:49
【问题描述】：

所以我正在尝试测试是否在我的表单上调用了句柄提交函数。它达到了如下所示的条件并阻止提交表单。我将如何模拟内部的验证函数以返回一个空对象 {}。这将使我的表单有效，然后按要求提交。

Validate 在 form.jsx 中的 Form 组件之外定义。我将其导出为 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);
    });

谢谢！

【问题讨论】：

这完全取决于validate 的来源。您没有指定。请为您的问题提供stackoverflow.com/help/mcve。
抱歉，我已经更新了。

标签： reactjs jestjs enzyme

【解决方案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 可重用或与功能组件一起使用，则应将其移至另一个模块。

【讨论】：