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 你可以在单独的测试中调用它。

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屋！