ByDisplayValue

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

返回具有匹配显示值的 input、textarea 或 select 元素。 

input tags

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

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

// HTML
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')

textarea tags

<textarea id="messageTextArea" />

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

// HTML
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')

select tags

如果是select，这将搜索一个匹配给定 TextMatch 的选定<option>的<select>。

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

// HTML
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')