如何使用 Jest 监视 class 属性箭头函数

Question

如何使用 Jest 监视 class 属性箭头函数？我有以下示例测试用例，它因错误 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();
  });
});

我可以通过将按钮的 onClick 属性更改为 () => this.onButtonClick() 来使测试通过，但我不想仅仅为了测试而更改我的组件实现。

有什么方法可以在不改变组件实现的情况下通过这个测试吗？

Answer 1

根据this enzyme issue and this one，你有两个选择：

选项 1：在 spyOn

之后调用 wrapper.update()

在你的情况下，那将是：

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();
  });
});

选项 2：不使用 class 属性

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

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 监视 class 属性箭头函数

How to spy on a class property arrow function using Jest

spy

reactjs

jestjs

enzyme

如何使用 Jest 监视 class 属性 箭头函数

How to spy on a class property arrow function using Jest

spy

reactjs

jestjs

enzyme

如何使用 Jest 监视 class 属性箭头函数