ByText

getByText、queryByText、getAllByText、queryAllByText、findByText、findAllByText

API

getByText(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  text: TextMatch,
  options?: {
    selector?: string = '*',
    exact?: boolean = true,
    ignore?: string|boolean = 'script, style',
    normalizer?: NormalizerFn,
  }): HTMLElement

これにより、textContent が指定された TextMatch と一致するテキストノードを持つすべての要素が検索されます。

<a href="/about">About ℹ️</a>

ネイティブ

import {screen} from '@testing-library/dom'

const aboutAnchorNode = screen.getByText(/about/i)

React

import {render, screen} from '@testing-library/react'

render(<MyComponent />)
const aboutAnchorNode = screen.getByText(/about/i)

Angular

import {render, screen} from '@testing-library/angular'

await render(MyComponent)
const aboutAnchorNode = screen.getByText(/about/i)

Cypress

cy.findByText(/about/i).should('exist')

type 属性が submit または button の input でも動作します。

<input type="submit" value="Send data" />

オプション

TextMatch オプションと、次のオプション:

selector

注意

selector オプションの使用方法とタイミングの詳細については、getByLabelText を参照してください。

ignore

ignore オプションはクエリセレクターを受け入れます。 node.matches がそのセレクターに対して true を返した場合、ノードは無視されます。これは既定では 'script, style' になっていますが、一般にこれらのタグは選択したくないためです。ただし、インラインスクリプトファイルにコンテンツがある場合は、スクリプトタグが返される可能性があります。

この動作を無効にする場合は、ignore を false に設定します。