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

Question 1

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

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

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

Question 2

アサート要素が存在しません

標準のgetByメソッドは要素が見つからない場合にエラーをスローするため、要素がDOMに存在しないことを表明する場合は、queryBy代わりにAPIを使用できます。
const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist
queryAllAPIのバージョンが一致するノードの配列を返します。配列の長さは、要素がDOMに追加またはDOMから削除された後のアサーションに役立ちます。
const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements
not.toBeInTheDocument

jest-domユーティリティライブラリが提供 .toBeInTheDocument()要素は、文書の本体にある、又はないことを主張するために使用することができるマッチャを、。これは、クエリ結果をアサートするよりも意味がありますnull。
import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()

Question 3

queryBy/を使用しqueryAllByます。

あなたが言うように、何も見つからない場合はエラーgetBy*をgetAllBy*スローします。

しかし、同等の方法queryBy*およびqueryAllBy*その代わりに返しますnullか[]：

queryBy

queryBy*クエリは、クエリに対して最初に一致するノードを返し、一致するnull要素がない場合は返します。これは、存在しない要素をアサートする場合に役立ちます。これは、複数の一致が見つかった場合にスローされます（代わりにqueryAllByを使用してください）。

queryAllBy queryAllBy*クエリは、クエリに一致するすべてのノードの配列を返し、一致する[]要素がない場合は空の配列（）を返します。

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

したがって、言及した特定の2つについては、代わりにqueryByTextandを使用しますqueryByTestIdが、これらは、これら2つだけでなく、すべてのクエリで機能します。

Question 4

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();
  });
});

Question 5

getBy *は要素が見つからない場合にエラーをスローするため、それを確認できます

expect(() => getByText('your text')).toThrow('Unable to find an element');

Question 6

react-native-testing-library "getAllByType"を使用して、コンポーネントがnullかどうかを確認できます。TestIDを設定する必要がないという利点があり、サードパーティのコンポーネントでも機能するはずです

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });