如何用玩笑和酶模拟React组件方法

Question

我有一个React组件（为了演示该问题，对此进行了简化）：

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

现在，我要测试提供的值的handleNameInput()调用searchDish。

为此，我想创建一个代替组件方法的笑话模拟函数。

到目前为止，这是我的测试用例：

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

但是我在控制台中得到的只是SyntaxError：

语法错误

>       at XMLHttpRequest.open
> (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
>       at run_xhr (node_modules/browser-request/index.js:215:7)
>       at request (node_modules/browser-request/index.js:179:10)
>       at DishAdmin._this.searchDish
> (src/main/react/components/DishAdmin.js:155:68)
>       at DishAdmin._this.handleNameInput
> (src/main/react/components/DishAdmin.js:94:45)
>       at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

所以我的问题是，如何正确地用酶模拟组分方法？

Answer 1

可以通过以下方式模拟该方法：

    it('handleNameInput', () => {
       let wrapper = shallow(<MyComponent/>);
       wrapper.instance().searchDish = jest.fn();
       wrapper.update();
       wrapper.instance().handleNameInput('BoB');
       expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
    })

您还需要在被测组件的包装器上调用.update，以便正确注册模拟功能。

语法错误来自错误的分配（您需要将方法分配给实例）。我的其他问题来自.update()模拟方法后不调用。