カスタムクエリ

DOM Testing Libraryは、デフォルトクエリの実装に使用されるヘルパー関数の多くを公開しています。これらのヘルパーを使用してカスタムクエリを構築できます。たとえば、以下のコードは、デフォルトのtestIdクエリをオーバーライドして、異なるdata属性を使用する方法を示しています。（注：テストファイルはDOM Testing Libraryを直接使用せず、test-utils.jsをインポートします）。

注意
カスタムクエリは、オプション設定オブジェクトにqueriesを追加することで、React Testing Libraryのrenderメソッドに追加できます。 render オプションを参照してください。

カスタムクエリは、カスタムレンダリングメソッドとは異なります。

test-utils.js
const domTestingLib = require('@testing-library/dom')
const {queryHelpers} = domTestingLib

export const queryByTestId = queryHelpers.queryByAttribute.bind(
  null,
  'data-test-id',
)
export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(
  null,
  'data-test-id',
)

export function getAllByTestId(container, id, ...rest) {
  const els = queryAllByTestId(container, id, ...rest)
  if (!els.length) {
    throw queryHelpers.getElementError(
      `Unable to find an element by: [data-test-id="${id}"]`,
      container,
    )
  }
  return els
}

export function getByTestId(container, id, ...rest) {
  // result >= 1
  const result = getAllByTestId(container, id, ...rest)
  if (result.length > 1) {
    throw queryHelpers.getElementError(
      `Found multiple elements with the [data-test-id="${id}"]`,
      container,
    )
  }
  return result[0]
}

// re-export with overrides
module.exports = {
  ...domTestingLib,
  getByTestId,
  getAllByTestId,
  queryByTestId,
  queryAllByTestId,
}

`buildQueries`

buildQueriesヘルパーを使用すると、testing-libraryのすべての標準クエリを使用してカスタムクエリを作成できます。

使用例については、カスタムレンダーガイドのカスタムクエリの追加セクションを参照してください。

他のアサーションライブラリの使用

jestを使用していない場合は、選択したライブラリに同様のカスタムアサーションセットがあるかもしれません。ここでは、他の一般的なアサーションライブラリのjest-domの代替リストを示します

chai-dom

他の代替案をご存知の場合は、プルリクエストを送信して、ここに追加してください！

`getNodeText`

getNodeText(node: HTMLElement)

余分な空白を削除し、HTML要素の完全なテキストコンテンツを返します。HTMLコード内の単語間の余分な空白は、テキストがレンダリングされるときに意味を持たないため、ブラウザでユーザーが認識するのと同じようにノード内のテキストを扱うことを目的としています。

// <div>
//   Hello
//     World  !
// </div>
const text = getNodeText(container.querySelector('div')) // "Hello World !"

この関数は、テキストコンテンツによってノードを照会するときにも内部的に使用されます。これにより、getByTextやqueryByTextなどの関数が期待どおりに機能し、ユーザーが行うのと同様にDOM内の要素を見つけることができます。

この関数は、一部の入力要素に対して特別な動作をします

// <input type="submit" value="Send data" />
// <input type="button" value="Push me" />
const submitText = getNodeText(container.querySelector('input[type=submit]')) // "Send data"
const buttonText = getNodeText(container.querySelector('input[type=button]')) // "Push me"

These elements use the attribute `value` and display its value to the user.

buildQueries​

他のアサーションライブラリの使用​

getNodeText​

`buildQueries`

他のアサーションライブラリの使用

`getNodeText`