跳至主要內容

API

@testing-library/dom​

此函式庫重新匯出 DOM 測試函式庫 (@testing-library/dom) 中的所有內容。請參閱文件以了解您可以使用的好東西。

render​

import {render} from '@testing-library/preact'

const {results} = render(<YourComponent />, {options})

選項​

選項描述預設值
container元件掛載的 HTML 元素。baseElement
baseElement容器附加到的根 HTML 元素。document.body
queries要綁定到 baseElement 的查詢。請參閱within。null
hydrate當元件已掛載且需要重新渲染時使用。大多數人不需要它。傳回給您的重新渲染函式已經執行此操作。false
wrapper包裝 YourComponent 的父元件。null

結果​

結果描述
container元件掛載的 HTML 元素。
baseElement容器附加到的根 HTML 元素。
debug使用 prettyDom 記錄 baseElement。
unmount從容器卸載元件。
rerender再次呼叫 render，傳入原始參數並將 hydrate 設定為 true。
asFragment傳回容器的 innerHTML。
...queries傳回所有 查詢函式，用於 baseElement。如果您傳入 query 參數，則會使用這些參數，否則會使用所有參數。

cleanup​

從容器卸載元件並銷毀容器。

如果您的測試框架 (例如 mocha、Jest 或 Jasmine) 將全域 afterEach() 函式注入到測試環境中，則會自動呼叫此函式。如果沒有，則需要在每個測試後呼叫 cleanup()。

如果您想停用此功能，則在執行測試時將 process.env.PTL_SKIP_AUTO_CLEANUP 設定為 true。

import {render, cleanup} from '@testing-library/preact'

afterEach(() => {
  cleanup()
}) // Default on import: runs it after each test.

render(<YourComponent />)

cleanup() // Or like this for more control.

act​

只是一個方便的匯出，指向 preact/test-utils/act。所有渲染和觸發的事件都包裝在 act 中，因此您實際上不需要它。它負責在調用後刷新所有效果和重新渲染。

📝 如果您想了解更多資訊，請查看此說明。即使它是針對 React 的，它也會讓您了解為什麼需要它。

fireEvent​

將其傳遞給 @testing-library/dom fireEvent。它也包裝在 act 中，因此您不必擔心這樣做。

📝 請記住，主要在使用 h / Preact.createElement 時，React 使用 Synthetic 事件系統，而 Preact 使用瀏覽器的原生 addEventListener 來處理事件。這表示 React 中的 onChange 和 onDoubleClick 等事件在 Preact 中是 onInput 和 onDblClick。雙擊範例會讓您了解如何使用這些函式進行測試。

範例 1​

const cb = jest.fn()

function Counter() {
  useEffect(cb)

  const [count, setCount] = useState(0)

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

const {
  container: {firstChild: buttonNode},
} = render(<Counter />)

// Clear the first call to useEffect that the initial render triggers.
cb.mockClear()

// Fire event Option 1.
fireEvent.click(buttonNode)

// Fire event Option 2.
fireEvent(
  buttonNode,
  new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    button: 0,
  }),
)

expect(buttonNode).toHaveTextContent('1')
expect(cb).toHaveBeenCalledTimes(1)

範例 2​

const handler = jest.fn()

const {
  container: {firstChild: input},
} = render(<input type="text" onInput={handler} />)

fireEvent.input(input, {target: {value: 'a'}})

expect(handler).toHaveBeenCalledTimes(1)

範例 3​

const ref = createRef()
const spy = jest.fn()

render(
  h(elementType, {
    onDblClick: spy,
    ref,
  }),
)

fireEvent['onDblClick'](ref.current)

expect(spy).toHaveBeenCalledTimes(1)