速查表

DOM Testing Library 中所有導出函數的簡短指南

查詢

	無匹配	1 個匹配	1 個以上的匹配	等待？
getBy	拋出錯誤	返回	拋出錯誤	否
findBy	拋出錯誤	返回	拋出錯誤	是
queryBy	null	返回	拋出錯誤	否
getAllBy	拋出錯誤	陣列	陣列	否
findAllBy	拋出錯誤	陣列	陣列	是
queryAllBy	[]	陣列	陣列	否

ByLabelText 透過標籤或 aria-label 文字內容尋找
- getByLabelText
- queryByLabelText
- getAllByLabelText
- queryAllByLabelText
- findByLabelText
- findAllByLabelText
ByPlaceholderText 透過輸入框的 placeholder 值尋找
- getByPlaceholderText
- queryByPlaceholderText
- getAllByPlaceholderText
- queryAllByPlaceholderText
- findByPlaceholderText
- findAllByPlaceholderText
ByText 透過元素文字內容尋找
- getByText
- queryByText
- getAllByText
- queryAllByText
- findByText
- findAllByText
ByDisplayValue 透過表單元素的當前值尋找
- getByDisplayValue
- queryByDisplayValue
- getAllByDisplayValue
- queryAllByDisplayValue
- findByDisplayValue
- findAllByDisplayValue
ByAltText 透過 img alt 屬性尋找
- getByAltText
- queryByAltText
- getAllByAltText
- queryAllByAltText
- findByAltText
- findAllByAltText
ByTitle 透過 title 屬性或 svg title 標籤尋找
- getByTitle
- queryByTitle
- getAllByTitle
- queryAllByTitle
- findByTitle
- findAllByTitle
ByRole 透過 aria role 尋找
- getByRole
- queryByRole
- getAllByRole
- queryAllByRole
- findByRole
- findAllByRole
ByTestId 透過 data-testid 屬性尋找
- getByTestId
- queryByTestId
- getAllByTestId
- queryAllByTestId
- findByTestId
- findAllByTestId

非同步

請參閱非同步 API。記得在您的測試中 await 或 .then() 非同步函數的結果！

waitFor (Promise) 在停止拋出錯誤或超時之前重試函數
waitForElementToBeRemoved (Promise) 重試函數，直到不再返回 DOM 節點

自 v7.0.0 起已棄用
wait (Promise) 在停止拋出錯誤或超時之前重試函數
waitForElement (Promise) 重試函數，直到它返回一個元素或元素陣列。 findBy 和 findAllBy 查詢是非同步的，並且會重試直到查詢成功返回，或查詢超時；它們包裝了 waitForElement
waitForDomChange (Promise) 每次 DOM 更改時重試函數

事件

請參閱 fireEvent 的考量、事件 API

fireEvent 觸發 DOM 事件：fireEvent(node, event)
fireEvent.* 預設事件類型的輔助函數
- click fireEvent.click(node)
- 查看所有支援的事件

其他

請參閱在元素內查詢、設定 API

within 取得一個節點並返回一個物件，其中包含綁定到該節點的所有查詢 (用於從 React Testing Library 的 render 方法返回查詢)：within(node).getByText("hello")
configure 更改全域選項：configure({testIdAttribute: 'my-data-test-id'})

文字匹配選項

給定以下 HTML

<div>Hello World</div>

將找到 div

// Matching a string:
getByText(container, 'Hello World') // full string match
getByText(container, 'llo Worl', {exact: false}) // substring match
getByText(container, 'hello world', {exact: false}) // ignore case

// Matching a regex:
getByText(container, /World/) // substring match
getByText(container, /world/i) // substring match, ignore case
getByText(container, /^hello world$/i) // full string match, ignore case
getByText(container, /Hello W?oRlD/i) // advanced regex

// Matching with a custom function:
getByText(container, (content, element) => content.startsWith('Hello'))

給定一個按鈕，該按鈕在一段時間後更新頁面

test('loads items eventually', async () => {
  // Click button
  fireEvent.click(getByText(node, 'Load'))

  // Wait for page to update with query text
  const items = await findAllByText(node, /Item #[0-9]: /)
  expect(items).toHaveLength(10)
})

查詢​

非同步​

事件​

其他​

文字匹配選項​

查詢

非同步

事件

其他

文字匹配選項