ParValeurAffichée

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

getByDisplayValue, queryByDisplayValue, getAllByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue

API

getByDisplayValue(
  // If you're using `screen`, then skip the container argument:
  container: HTMLElement,
  value: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement

Renvoie l'élément input, textarea ou select qui possède la valeur affichée correspondante.

input tags

<input type="text" id="lastName" />

document.getElementById('lastName').value = 'Norris'

Native

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

const lastNameInput = screen.getByDisplayValue('Norris')

React

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

render(<MyComponent />)
const lastNameInput = screen.getByDisplayValue('Norris')

Angular

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

await render(MyComponent)
const lastNameInput = screen.getByDisplayValue('Norris')

Cypress

cy.findByDisplayValue('Norris').should('exist')

textarea tags

<textarea id="messageTextArea" />

document.getElementById('messageTextArea').value = 'Hello World'

Native

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

const messageTextArea = screen.getByDisplayValue('Hello World')

React

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

render(<MyComponent />)
const messageTextArea = screen.getByDisplayValue('Hello World')

Angular

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

await render(MyComponent)
const messageTextArea = screen.getByDisplayValue('Hello World')

Cypress

cy.findByDisplayValue('Hello World').should('exist')

select tags

Dans le cas d'un select, cette fonction recherchera un <select> dont l'<option> sélectionnée correspond au TextMatch donné.

<select>
  <option value="">State</option>
  <option value="AL">Alabama</option>
  <option selected value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

Native

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

const selectElement = screen.getByDisplayValue('Alaska')

React

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

render(<MyComponent />)
const selectElement = screen.getByDisplayValue('Alaska')

Angular

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

await render(MyComponent)
const selectElement = screen.getByDisplayValue('Alaska')

Cypress

cy.findByDisplayValue('Alaska').should('exist')

Options

options TextMatch