別のメソッドによって呼び出されたreactコンポーネントメソッドをテストする方法

me-me

初期化されると、panと呼ばれる別のメソッドを呼び出す別のメソッドを呼び出すクラスがありますpanメソッドが呼び出されたことをテストしようとしています。クラスはそれよりも複雑ですが、私がテストしようとしているのはパンが呼び出されただけです。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.pan = this.pan.bind(this);
  }

  componentDidMount() {
    initExternals();
  }

  initExternals() {
    .. bla bla
   this.pan();
  }

  pan() {
   console.log('Function was called');
  }

}

これが私のテストクラスです

test('component should call initMap', () => {
  const spy = jest.spyOn(WhereWeAreMap.prototype, 'pan');
  const component = mount(<WhereWeAreMap />);
  expect(spy).toHaveBeenCalled();
});

I have also tried.
test('component should call initMap', () => {
  const component = mount(<WhereWeAreMap />);
  const spy = jest.spyOn(component.instance(), 'pan');
  wrapper.instance().forceUpdate();
  expect(spy).toHaveBeenCalled();
});

コンポーネントメソッドpanをテストできないため、私のテストで何が問題になっていますか?expect(spy).toHaveBeenCalled()と呼ばれます。ログはそれが呼び出されたことを示していますが、私のテストは異なって表示されます。

モック関数が呼び出されることを期待していましたが、呼び出されませんでした。

ディミター・クリストフ

最初のテスト方法は私にとって間違いなく機能するものであり、ATMを実行しているテストにすぐに追加され、問題ありません。

  it('adds the correct scroll blocking class to document.body', () => {
    const spy = jest.spyOn(BlockUI.prototype, 'foo');
    const instance = mount(<BlockUI />).instance();
    // some suggest you need to do this but works without it.
    // instance.forceUpdate();

    const body = instance.document.body;
    expect(body.className).toMatchSnapshot();
    expect(spy).toHaveBeenCalled();
  });

BlockUI.prototype.foo参照を追加しdocument.body、インスタンスへとニーズがアンマウントに削除することをそれにクラスを追加します。

上記の設定は次の場合に問題ありません。

"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.7.1",
"enzyme-to-json": "3.3.4",
"jest": "23.6.0",

以前は酵素なしで、または古いバージョンでこれを機能させるのに苦労しましたが、今は問題ありません。

問題を引き起こす可能性のある非同期のものには例外があります-スパイを使用するのではなく、呼び出されたことを確認したいメソッドの結果を確認することをお勧めします。酵素で浅いレンダラーを使用しない場合、ライフサイクルメソッドが呼び出されることが保証されています

panプロトタイプからローカルにバインドされたコピーを保存することにより、コンストラクター内のインスタンスメソッドを変更していますが、それでもプロトタイプを呼び出し、スパイがそれをキャッチする必要があります。私はあなたが何かの古いバージョンを使用していることを期待しています。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ルートパスによってコンポーネントから指定されたメソッドを呼び出す方法は?

分類Dev

コンポーネントメソッドは、TouchableHighlightのonPress()メソッドによって呼び出されませんでした

分類Dev

深くネストされた子コンポーネントからメソッドを呼び出す方法

分類Dev

親によって呼び出される埋め込みコンポーネントからの小道具としてメソッドを渡す

分類Dev

別のコンポーネントでメソッドを呼び出す方法

分類Dev

Jasmine:メソッドが別のクラスの別のメソッドによって呼び出されているかどうかをテストする

分類Dev

状態を更新するコンポーネントメソッドを呼び出した後にReact状態をテストする方法-Enzymeを使用

分類Dev

EnzymeとSinonを使用して、Reactコンポーネントのテストカスタムメソッドが呼び出されました

分類Dev

React.jsの別のクラスコンポーネントからメソッドを呼び出すにはどうすればよいですか?

分類Dev

renderメソッドのネストされた関数から呼び出しコンポーネントのメソッドを反応させます

分類Dev

コンポーネントメソッドが別のメソッドを呼び出すことをテストする

分類Dev

コンストラクター内で別のメソッドを呼び出すことによって作成されたビットマップオブジェクトにプロパティを追加する

分類Dev

React-動的に生成されたコンポーネントにカーソルを合わせると、renderメソッドが呼び出されます

分類Dev

reactの別のコンポーネントのコンポーネントからメソッドをエクスポートまたは呼び出すにはどうすればよいですか?

分類Dev

生成されたhtmlコンポーネントをクリックしてメソッドを呼び出す

分類Dev

RxJSを介してreactコンポーネントのメソッドの呼び出しを調整するにはどうすればよいですか?

分類Dev

Springのコンポーネントスキャンによって自動的に作成されたBeanのInitメソッドを設定する方法

分類Dev

理由もなく2回呼び出されているreactコンポーネントのrenderメソッド

分類Dev

Reactコンポーネントメソッドが呼び出されてもexpect(...)。toHaveBeenCalled()が失敗する

分類Dev

リモートメソッド呼び出しによってフェッチされたHibernateエンティティを初期化する方法は?

分類Dev

外部スクリプトのReactコンポーネントでメソッドを呼び出す方法

分類Dev

Sinon-テストしたいメソッドによって呼び出されたメソッドをスタブ化する方法

分類Dev

Reactの子コンポーネントのメソッドを呼び出す

分類Dev

Reactの子コンポーネントのメソッドを呼び出す

分類Dev

親コンポーネントへのメソッドを呼び出すコンポーネント内の関数を単体テストする方法

分類Dev

Angular 2のあるコンポーネントから別のコンポーネントにメソッドを呼び出す方法は?

分類Dev

あるコンポーネントから別のコンポーネントにメソッドを呼び出す簡単な方法はありますか?

分類Dev

EmberCLIによって構築されたEmberJSで、さまざまなコントローラーのメソッドを呼び出す方法は?

分類Dev

VueイベントによってトリガーされたVueコンポーネントメソッドをSinonスパイする方法は?

Related 関連記事

  1. 1

    ルートパスによってコンポーネントから指定されたメソッドを呼び出す方法は?

  2. 2

    コンポーネントメソッドは、TouchableHighlightのonPress()メソッドによって呼び出されませんでした

  3. 3

    深くネストされた子コンポーネントからメソッドを呼び出す方法

  4. 4

    親によって呼び出される埋め込みコンポーネントからの小道具としてメソッドを渡す

  5. 5

    別のコンポーネントでメソッドを呼び出す方法

  6. 6

    Jasmine:メソッドが別のクラスの別のメソッドによって呼び出されているかどうかをテストする

  7. 7

    状態を更新するコンポーネントメソッドを呼び出した後にReact状態をテストする方法-Enzymeを使用

  8. 8

    EnzymeとSinonを使用して、Reactコンポーネントのテストカスタムメソッドが呼び出されました

  9. 9

    React.jsの別のクラスコンポーネントからメソッドを呼び出すにはどうすればよいですか?

  10. 10

    renderメソッドのネストされた関数から呼び出しコンポーネントのメソッドを反応させます

  11. 11

    コンポーネントメソッドが別のメソッドを呼び出すことをテストする

  12. 12

    コンストラクター内で別のメソッドを呼び出すことによって作成されたビットマップオブジェクトにプロパティを追加する

  13. 13

    React-動的に生成されたコンポーネントにカーソルを合わせると、renderメソッドが呼び出されます

  14. 14

    reactの別のコンポーネントのコンポーネントからメソッドをエクスポートまたは呼び出すにはどうすればよいですか?

  15. 15

    生成されたhtmlコンポーネントをクリックしてメソッドを呼び出す

  16. 16

    RxJSを介してreactコンポーネントのメソッドの呼び出しを調整するにはどうすればよいですか?

  17. 17

    Springのコンポーネントスキャンによって自動的に作成されたBeanのInitメソッドを設定する方法

  18. 18

    理由もなく2回呼び出されているreactコンポーネントのrenderメソッド

  19. 19

    Reactコンポーネントメソッドが呼び出されてもexpect(...)。toHaveBeenCalled()が失敗する

  20. 20

    リモートメソッド呼び出しによってフェッチされたHibernateエンティティを初期化する方法は?

  21. 21

    外部スクリプトのReactコンポーネントでメソッドを呼び出す方法

  22. 22

    Sinon-テストしたいメソッドによって呼び出されたメソッドをスタブ化する方法

  23. 23

    Reactの子コンポーネントのメソッドを呼び出す

  24. 24

    Reactの子コンポーネントのメソッドを呼び出す

  25. 25

    親コンポーネントへのメソッドを呼び出すコンポーネント内の関数を単体テストする方法

  26. 26

    Angular 2のあるコンポーネントから別のコンポーネントにメソッドを呼び出す方法は?

  27. 27

    あるコンポーネントから別のコンポーネントにメソッドを呼び出す簡単な方法はありますか?

  28. 28

    EmberCLIによって構築されたEmberJSで、さまざまなコントローラーのメソッドを呼び出す方法は?

  29. 29

    VueイベントによってトリガーされたVueコンポーネントメソッドをSinonスパイする方法は?

ホットタグ

アーカイブ