web-dev-qa-db-ja.com

jestとreact-testing-libraryを使用して、要素が存在しないことをどのようにテストしますか？

Jestとreact-testing-libraryを使用するための単体テストを書いているコンポーネントライブラリがあります。特定の小道具やイベントに基づいて、特定の要素がレンダリングされていないことを確認します。

getByText、getByTestIdなど、expect関数が起動する前にテストが失敗する原因となる要素が見つからない場合、react-testing-libraryでスローおよびエラーが発生します。

React-testing-libraryを使用してjestに存在しないものをどのようにテストしますか？

reactjsjestjsreact-testing-library
28
SomethingOn

From DOM Testing-library Docs-Appearance and Disappearance

要素が存在しないことを確認したい場合はどうすればよいですか？

通常、getByTestIdユーティリティを使用して、レンダリングされた要素にアクセスします。ただし、要素が見つからない場合、その関数はエラーをスローします。要素が存在しないことを具体的にテストする場合は、queryByTestIdユーティリティを使用する必要があります。このユーティリティは、見つかった場合は要素を返し、見つからない場合はnullを返します。

expect(queryByTestId('thing-that-does-not-exist')).toBeNull()
59
kentcdodds

GetByTestIdの代わりにqueryByTestIdを使用する必要があります。

ここに、「car」IDのコンポーネントが存在しないかどうかをテストするコード例を示します。

 describe('And there is no car', () => {
  it('Should not display car mark', () => {
    const props = {
      ...defaultProps,
      base: null,
    }
    const { queryByTestId } = render(
      <IntlProvider locale="fr" messages={fr}>
        <CarContainer{...props} />
      </IntlProvider>,
    );
    expect(queryByTestId(/car/)).toBeNull();
  });
});
3
Valentin Garreau