速查表

取得可列印的速查表

React Testing Library 中所有導出函式的簡短指南

• render const {/* */} = render(Component) 回傳
  • unmount 函式以卸載元件
  • container 參考元件掛載的 DOM 節點
  • 來自 DOM Testing Library 的所有查詢，綁定到 document，因此無需傳遞節點作為第一個參數 (通常，您可以改用 screen 導入)

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

test('loads items eventually', async () => {
  render(<Page />)

  // Click button
  fireEvent.click(screen.getByText('Load'))

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

查詢

與 DOM Testing Library 的差異

從 React Testing Library 中的 render 回傳的查詢與 DOM Testing Library 相同，只是它們將第一個參數綁定到 document，因此您可以使用 getByText('text')，而不是 getByText(node, 'text')

請參閱我應該使用哪個查詢？

	無匹配	1 個匹配	1+ 個匹配	Await？
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

非同步

dom-testing-library 非同步 API 從 React Testing Library 重新匯出。

• waitFor (Promise) 在函式停止拋出錯誤或逾時之前重試
• waitForElementToBeRemoved (Promise) 重試函式直到它不再回傳 DOM 節點

事件

請參閱事件 API

• fireEvent 觸發 DOM 事件：fireEvent(node, event)
• fireEvent.* 預設事件類型的輔助函式
  • click fireEvent.click(node)
  • 查看所有支援的事件
• act react act 的包裝器；React Testing Library 已經將 render 和 fireEvent 包裝在 act 的呼叫中，因此大多數情況下不需要手動使用它

其他

請參閱 在元素內查詢、配置 API、清除、

• within 取得節點並回傳一個物件，其中所有查詢都綁定到該節點 (用於回傳 React Testing Library 的 render 方法的查詢)：within(node).getByText("hello")
• configure 變更全域選項：configure({testIdAttribute: 'my-data-test-id'})
• cleanup 清除 DOM (與 afterEach 一起使用以在測試之間重設 DOM)

文字匹配選項

給定以下 HTML

<div>Hello World</div>

會 找到 div

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

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

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

取得可列印的速查表