Jest spyOn函数调用 [英] Jest spyOn function called
问题描述
我正在尝试为一个简单的React组件编写一个简单的测试,我想使用Jest来确认当我用酶模拟点击时已经调用了一个函数。根据Jest文档,我应该可以使用 spyOn
来执行此操作: spyOn 。
I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should be able to use spyOn
to do this: spyOn.
然而,当我尝试这个时,我一直在 TypeError:无法读取未定义
的属性'_isMockFunction',我认为这意味着我的间谍未定义。我的代码如下所示:
However, when I try this, I keep getting TypeError: Cannot read property '_isMockFunction' of undefined
which I take to mean that my spy is undefined. My code looks like this:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
myClickFunc = () => {
console.log('clickity clickcty')
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro" onClick={this.myClickFunc}>
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
在我的测试文件中:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { shallow, mount, render } from 'enzyme'
describe('my sweet test', () => {
it('clicks it', () => {
const spy = jest.spyOn(App, 'myClickFunc')
const app = shallow(<App />)
const p = app.find('.App-intro')
p.simulate('click')
expect(spy).toHaveBeenCalled()
})
})
任何人都能了解我做错了什么?
Anyone have an insight into what I'm doing wrong?
推荐答案
嘿伙计我知道我在这里有点晚了,但除了你如何 spyOn
之外,你几乎没有任何改变。
当您使用间谍时,您有两个选择: spyOn
App.prototype
或组件 component.instance()
。
Hey buddy I know I'm a bit late here, but you were almost done without any changes besides how you spyOn
.
When you use the spy, you have two options: spyOn
the App.prototype
, or component component.instance()
.
const spy = jest.spyOn(Class.prototype,method )
在类原型上附加间谍并渲染(浅渲染)你的实例的顺序非常重要。
The order of attaching the spy on the class prototype and rendering (shallow rendering) your instance is important.
const spy = jest.spyOn(App.prototype, "myClickFn");
const instance = shallow(<App />);
第一个 App.prototype
位你有什么需要让事情发挥作用。 javascript 类
除非用 new MyClass()
实例化它,否则它没有任何方法进入 MyClass.prototype
。对于您的特定问题,您只需要监视 App.prototype
方法 myClickFn
。
The App.prototype
bit on the first line there are what you needed to make things work. A javascript class
doesn't have any of its methods until you instantiate it with new MyClass()
, or you dip into the MyClass.prototype
. For your particular question, you just needed to spy on the App.prototype
method myClickFn
.
jest.spyOn(component.instance(),method)
const component = shallow(<App />);
const spy = jest.spyOn(component.instance(), "myClickFn");
此方法需要浅/ render / mount
React.Component
的实例可用。基本上 spyOn
只是在寻找劫持并推入 jest.fn()
的东西。它可能是:
This method requires a shallow/render/mount
instance of a React.Component
to be available. Essentially spyOn
is just looking for something to hijack and shove into a jest.fn()
. It could be:
普通的对象
:
const obj = {a: x => (true)};
const spy = jest.spyOn(obj, "a");
A class
:
class Foo {
bar() {}
}
const nope = jest.spyOn(Foo, "bar");
// THROWS ERROR. Foo has no "bar" method.
// Only an instance of Foo has "bar".
const fooSpy = jest.spyOn(Foo.prototype, "bar");
// Any call to "bar" will trigger this spy; prototype or instance
const fooInstance = new Foo();
const fooInstanceSpy = jest.spyOn(fooInstance, "bar");
// Any call fooInstance makes to "bar" will trigger this spy.
或 React.Component实例
:
const component = shallow(<App />);
/*
component.instance()
-> {myClickFn: f(), render: f(), ...etc}
*/
const spy = jest.spyOn(component.instance(), "myClickFn");
或 React.Component.prototype
:
/*
App.prototype
-> {myClickFn: f(), render: f(), ...etc}
*/
const spy = jest.spyOn(App.prototype, "myClickFn");
// Any call to "myClickFn" from any instance of App will trigger this spy.
我已经使用过两种方法。当我有一个 beforeEach()
或 beforeAll()
块时,我可能会采用第一种方法。如果我只需要一个快速的间谍,我将使用第二个。请记住附加间谍的顺序。
I've used and seen both methods. When I have a beforeEach()
or beforeAll()
block, I might go with the first approach. If I just need a quick spy, I'll use the second. Just mind the order of attaching the spy.
编辑:
如果你想检查你的 myClickFn $的副作用c $ c>你可以在单独的测试中调用它。
If you want to check the side effects of your myClickFn
you can just invoke it in a separate test.
const app = shallow(<App />);
app.instance().myClickFn()
/*
Now assert your function does what it is supposed to do...
eg.
expect(app.state("foo")).toEqual("bar");
*/
这篇关于Jest spyOn函数调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!