web-dev-qa-db-ja.com

Jest-コンポーネントが存在しないかどうかをテストする方法は？

コンポーネントが存在しない、つまり特定のコンポーネントがレンダリングされていないことを確認するにはどうすればよいですか？

jestjsenzyme
27
JoeTidee

酵素 contains を使用して、コンポーネントがレンダリングされたかどうかを確認できます。

expect(component.contains(<ComponentName />)).toBe(false)
28
Andreas Köberle

.contains は、引数としてReact Nodeまたはノードの配列を受け取ります。代わりに、 .find を使用します。

expect(wrapper.find('selector').exists()).toBeTruthy()
24
Artem Kislov

toExistのドキュメント に基づいてわずかに更新された回答を提供する

function Fixture() {
  return (
    <div>
      <span className="foo" />
      <span className="bar baz" />
    </div>
  );
}

const wrapper = mount(<Fixture />); // mount/render/shallow when applicable

expect(wrapper.find('span')).toExist();
expect(wrapper.find('ul')).not.toExist();
4
Snekse

.containsは、findとは異なり、セレクターを予期していません。 ShallowWrapperの長さ属性を見ることができます

expect(wrapper.find('...')).toHaveLength(0)

レンダリングされた出力に接続コンポーネントが存在するかどうかをテストするために、EnzymeとJestでこの構文を使用する必要があることがわかりました。

2
Mark Swardstrom