我有一个反应组件(这是为了证明问题而简化):
class MyComponent extends Component {
handleNameInput = (value) => {
this.searchDish(value);
};
searchDish = (value) => {
//Do something
}
render() {
return(<div></div>)
}
}
现在我想用提供的值测试 handleNameInput()
调用 searchDish
.
为了做到这一点,我想创建一个替换组件方法的jest mock function .
到目前为止,这是我的测试用例:
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
wrapper.searchDish = jest.fn();
wrapper.instance().handleNameInput('BoB');
expect(wrapper.searchDish).toBeCalledWith('BoB');
})
但我在控制台中得到的只是 SyntaxError
:
XMLHttpRequest.open中的SyntaxError(node_modules / jsdom / lib / jsdom / living / xmlhttprequest.js:458:15)
在run_xhr(node_modules / browser-request / index.js:215:7)
at request(node_modules / browser-request / index.js:179:10)
在DishAdmin._this.searchDish(src / main / react / components / DishAdmin.js:155:68)
在DishAdmin._this.handleNameInput(src / main / react / components / DishAdmin.js:94:45)
在Object . <anonymous>(src / main / react / tests / DishAdmin.test.js:122:24)
所以我的问题是,如何用酶正确模拟组分方法?
3 回答
可以通过以下方式模拟该方法:
您还需要在测试组件的包装器上调用.update,以便正确注册模拟功能 .
语法错误来自错误的分配(您需要将方法分配给实例) . 我的其他问题来自于在模拟方法后没有调用
.update()
.需要更换
wrapper.update();
与wrapper.instance().forceUpdate();
@ Miha的回答是一个小改动: