メインコンテンツにスキップ

Cypress Testing Library

Cypress Testing Libraryを使用すると、Cypressのエンドツーエンドブラウザテスト内でdom-testingのクエリを使用できます。

npm install --save-dev cypress @testing-library/cypress

使用法​

Cypress Testing Libraryは、Cypressのcyコマンドを拡張します。

プロジェクトのcypress/support/commands.jsに次の行を追加します。

import '@testing-library/cypress/add-commands'

グローバルなcyオブジェクトから、DOM Testing LibraryのfindByおよびfindAllByコマンドの一部を使用できるようになりました。参考資料については、About queriesのドキュメントを参照してください。

注: get*クエリは、合理的なCypressテストでは再試行が必要であり、find*クエリがそれをすでにサポートしているため、サポートされていません。query*クエリはv5以降不要になり、v6で削除されます。find*は組み込みのCypressアサーションを完全にサポートしています（query*の唯一のユースケースを削除します）。

TypeScriptを使用する場合​

型定義は、tsconfig.jsonで次のように追加する必要があります。

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

すべてのライブラリ定義はこちらにあります。

例​

いくつかの簡単な例を示すために（cypress/integration/find.spec.jsから）

cy.findByRole('button', {name: /Jackie Chan/i}).click()
cy.findByRole('button', {name: /Button Text/i}).should('exist')
cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist')
cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist')

// findByRole _inside_ a form element
cy.get('form')
  .findByRole('button', {name: /Button Text/i})
  .should('exist')
cy.findByRole('dialog').within(() => {
  cy.findByRole('button', {name: /confirm/i})
})

Cypress Testing Libraryは、jQuery要素とDOMノードの両方をサポートします。CypressはjQuery要素を使用し、DOM Testing LibraryはDOMノードを期待するため、これは必要です。jQuery要素をcontainerとして渡すと、コレクションから最初のDOMノードを取得し、それをDOM Testing Library関数のcontainerパラメーターとして使用します。