web-dev-qa-db-ja.com

Jestを使用してクラスプロパティの矢印関数をスパイする方法

Jestを使用してクラスプロパティの矢印関数をスパイするにはどうすればよいですか？エラー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 propを() => this.onButtonClick()に変更することでテストに合格することができますが、テストのためだけにコンポーネントの実装を変更したくないでしょう。

コンポーネントの実装を変更せずにこのテストに合格する方法はありますか？

reactjsjestjsenzymespy
10
DanielGibbs

この酵素の問題 および this one によると、2つのオプションがあります：

オプション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 App extends Component {
  constructor(props) {
    super(props);

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

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

  render() {
    return <button onClick={this.onButtonClick} />;
  }
}
15
Léopold Houdin