代码之家 › 专栏 › 技术社区 › DanielGibbs

如何使用Jest监视类属性arrow函数

spy enzyme jestjs reactjs

7

DanielGibbs · 技术社区 · 6 年前

如何使用Jest监视类属性arrow函数?我有下面的示例测试用例,它失败了,并且出现了错误 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() 但是我不希望仅仅为了测试而改变我的组件实现。

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

1 回复 | 直到 6 年前

1

23

Emile Bergeron Rudy Hinojosa 5 年前

根据 this enzyme issue this one

选项1:呼叫 wrapper.update() 之后 spyOn

对你来说,那就是:

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 App extends Component {
  constructor(props) {
    super(props);

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

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

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