2

コンポーネントの周りにShallowWrapperを作成し、指定されたセマンティックUIリアクトボタンを（IDで）見つけ、ボタンのクリックをシミュレートし、クリックが特定のコンテンツを切り替えたかどうかを確認するjest/enzymeテストがあります。

サンプル JSX:

<Popup
  trigger={<Button onClick={this.toggleShowThing} id="special-btn">a button</Button>}
  content="Popup Words"
/>
{this.state.showThing &&
  <div className="special-thing">The Thing's Words</div>
}

サンプル テスト:

it('shows the thing when the button is clicked', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('#special-btn').simulate('click', { preventDefault() {} });
  expect(wrapper.find('.special-thing').exists()).toBe(true);
});

このテストは、ボタンを取得したばかりのときに機能しました。ポップアップを追加し、ボタンをトリガー プロップに配置すると、#special-btn が見つからなかったため、エラーが発生しました。

エラー: メソッド「props」は、単一ノードでのみ実行することを意図しています。代わりに 0 件見つかりました。

コンポーネントの酵素スナップショットは、Popup が次のようになっていることを示しています。

<Popup 
  content="Popup Words"
  on="hover"
  position="top left"
  trigger={
    <Button
      id="special-btn"
      onClick={[Function]}
    >
      a button
    </Button>
  }
/>

テストを再び機能させる必要があります。.simulate('click') を呼び出すことができるように、テストで再び #special-btn にアクセスするにはどうすればよいですか?

4

3 に答える 3

0

問題は、それができないことです。テストを書き直す必要があります。ボタンはコンポーネントによってラップされているPopupため、アクセスできません。ただし、セレクターをに移動してPopup、ポップアップをクリックすると必要な変更がトリガーされるかどうかをテストできます。他に方法はありません。

// JSX
<Popup
  trigger={<Button onClick={this.toggleShowThing} id="special-btn">a button</Button>}
  content="Popup Words"
  id="popup"
/>
{this.state.showThing &&
  <div className="special-thing">The Thing's Words</div>
}

// test
it('shows the thing when the button is clicked', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('#popup').simulate('click', { preventDefault() {} });
  expect(wrapper.find('.special-thing').exists()).toBe(true);
});
于 2017-08-23T22:17:31.097 に答える