如何使用Jest监视类属性箭头功能 [英] How to spy on a class property arrow function using Jest

问题描述

如何使用Jest监视类属性箭头功能？我有以下示例测试用例，失败了，错误为调用了预期的模拟函数。：

  import React，{Component}从反应; 
从酶导入{shallow}； 
 
类App扩展了组件{
 onButtonClick =（）=> {
 //按钮点击逻辑。 
}; 
 
 render（）{
 return< button onClick = {this.onButtonClick} /> ;; 
} 
} 
 
 describe（单击按钮时，（）=> {
 it（应调用onButtonClick，（）=> {
 const app =浅（< App />）; 
 const onButtonClickSpy = jest.spyOn（app.instance（）， onButtonClick）; 
 
 const按钮= app.find（ button）; 
 button.simulate（ click）; 
 Expect（onButtonClickSpy）.toHaveBeenCalled（）; 
}）; 
}）； 
  

我可以通过更改按钮的 onClick 支持（）=> this.onButtonClick（），但不希望仅出于测试目的而更改我的组件实现。

有没有办法做到这一点

解决方案

根据此酶问题和此一个，您有两个选择：

---

选择1：致电在 spyOn





之后，wrapper.update（）可以是：

  describe（ when按钮被点击，（）=> { 
 it（ should call onButtonClick，（）=> {
 const app = depth（< App />）; 
 const onButtonClickSpy = jest.spyOn（app.instance（ ）， onButtonClick）; 
 
 //这应该可以解决问题
 app.update（）; 
 app.instance（）。forceUpdate（）; 
 
 const button = app.find（ button）; 
 button.simulate（ click）; 
 Expect（onButtonClickSpy）.toHaveBeenCalled（）; 
}）； 
}）； 
  

---

选项2：不使用类属性

因此，对于您来说，您必须将组件更改为：

<上课前= lang-js prettyprint-override> 类App扩展了组件{
构造函数（props）{
超级属性（props）;

this.onButtonClick = this.onButtonClick.bind（this）;
}

onButtonClick（）{
//按钮单击逻辑。
};

render（）{
return< button onClick = {this.onButtonClick} /> ;;
}
}


How can I spy on a class property arrow function using Jest? I have the following example test case which fails with the error Expected mock function to have been called.:

import React, {Component} from "react";
import {shallow} from "enzyme";

class App extends Component {
  onButtonClick = () => {
    // Button click logic.
  };

  render() {
    return <button onClick={this.onButtonClick} />;
  }
}

describe("when button is clicked", () => {
  it("should call onButtonClick", () => {
    const app = shallow(<App />);
    const onButtonClickSpy = jest.spyOn(app.instance(), "onButtonClick");

    const button = app.find("button");
    button.simulate("click");
    expect(onButtonClickSpy).toHaveBeenCalled();
  });
});

I can make the test pass by changing the button's onClick prop to () => this.onButtonClick() but would prefer not to change my component implementation just for the sake of tests.

Is there any way to make this test pass without changing the component implementation?

解决方案

According to this enzyme issue and this one, you have two options:

---

Option 1: Call wrapper.update() after spyOn

In your case, that would be:

describe("when button is clicked", () => {
  it("should call onButtonClick", () => {
    const app = shallow(<App />);
    const onButtonClickSpy = jest.spyOn(app.instance(), "onButtonClick");

    // This should do the trick
    app.update();
    app.instance().forceUpdate();

    const button = app.find("button");
    button.simulate("click");
    expect(onButtonClickSpy).toHaveBeenCalled();
  });
});

---

Option 2: Don't use class property

So, for you, you would have to change your component to:

class App extends Component {
  constructor(props) {
    super(props);

    this.onButtonClick = this.onButtonClick.bind(this);
 }

  onButtonClick() {
    // Button click logic.
  };

  render() {
    return <button onClick={this.onButtonClick} />;
  }
}

这篇关于如何使用Jest监视类属性箭头功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！