Javascript 如何用笑话和酶模拟 React 组件方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41830165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to mock React component methods with jest and enzyme
提问by Miha ?u?ter?i?
I have a react component(this is simplified in order to demonstrate the issue):
我有一个反应组件（这是为了演示问题而简化的）：
class MyComponent extends Component {
handleNameInput = (value) => {
this.searchDish(value);
};
searchDish = (value) => {
//Do something
}
render() {
return(<div></div>)
}
}
Now I want to test that handleNameInput()calls searchDishwith the provided value.
现在我想用提供的值测试该handleNameInput()调用searchDish。
In order to do this I would like to create a jest mock functionthat replaces the component method.
为了做到这一点，我想创建一个替代组件方法的笑话模拟函数。
Here is my test case so far:
到目前为止，这是我的测试用例：
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
wrapper.searchDish = jest.fn();
wrapper.instance().handleNameInput('BoB');
expect(wrapper.searchDish).toBeCalledWith('BoB');
})
But all I get in the console is SyntaxError:
但我在控制台中得到的只是SyntaxError：
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)
语法错误
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)
So my question is, how do I properly mock component methods with enzyme?
所以我的问题是，如何使用酶正确模拟组件方法？
回答by Miha ?u?ter?i?
The method can be mocked in this way:
可以通过这种方式模拟该方法：
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
wrapper.instance().searchDish = jest.fn();
wrapper.update();
wrapper.instance().handleNameInput('BoB');
expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
})
You also need to call .update on the wrapper of the tested component in order to register the mock function properly.
您还需要在测试组件的包装器上调用 .update 以正确注册模拟函数。
The syntax error was coming from the wrong assingment (you need to assign the method to the instance). My other problems were coming from not calling .update()after mocking the method.
语法错误来自错误的赋值（您需要将方法分配给实例）。我的其他问题来自.update()模拟方法后没有调用。
回答by Aleh
Needs to be replaced wrapper.update();with wrapper.instance().forceUpdate();
需要替换wrapper.update();为wrapper.instance().forceUpdate();
回答by Yusufali2205
@Miha's answer worked with a small change:
@Miha 的回答有一个小的变化：
it('handleNameInput', () => {
let wrapper = shallow(<MyComponent/>);
const searchDishMock = jest.fn();
wrapper.instance().searchDish = searchDishMock;
wrapper.update();
wrapper.instance().handleNameInput('BoB');
expect(searchDishMock).toBeCalledWith('BoB');
})
