web-dev-qa-db-ja.com

テストReactコンポーネントメソッドが関数パスをプロップとして呼び出しています

Reactコンポーネントからメソッドを呼び出すと、コンポーネントへの関数パスが小道具としてトリガーされることをテストしたいと思います。メソッドは次のようなものです。

customMethod() {
  // Do something

  this.props.trackEvent({
    category: 'eventCategory',
    action: 'eventAction',
    label: 'eventAction',
  });

  // Do something else
}

メソッドはさまざまな方法で呼び出すことができるので、一般的なテストを行いたいだけです。customMethodが呼び出された場合、this.props.trackEventをデータでトリガーする必要があります。

Jestや酵素を使用してメソッド呼び出しをトリガーする方法はありますか？私はこのようなことをすることについて読んだ：

const wrapper = shallow(<AdPage {...baseProps} />);
wrapper.instance().customMethod();

しかし、それは機能していません…どんなアイデアでも。テストはかなり新しいので、この種のテストには別のアプローチを使用する必要がありますか？

reactjstestingenzymejest
11
Coluccini

CustomMethodがコンポーネントメソッドであると想定すると、次のようにテストします。

（1）ラッパーを作成するときに、trackEventプロップをjest.fn()として偽装します。

（2）wrapper.instance().customMethod();を使用してcustomMethodを呼び出します

（3）props.trackEventがあなたが言及した引数を持っていることを確認してください。

例として：

test('customMethod should call trackEvent with the correct argument', () => {
  const baseProps = {
    // whatever fake props you want passed to the component
    // ...
    trackEvent: jest.fn(),
  };
  const wrapper = shallow(<AdPage {...baseProps} />);

  wrapper.instance().customMethod();

  expect(baseProps.trackEvent).toHaveBeenCalledTimes(1);

  expect(baseProps.trackEvent).toHaveBeenCalledWith({
    category: 'eventCategory',
    action: 'eventAction',
    label: 'eventAction',
  });
});
13
nbkhope