API

• @testing-library/dom
• render
• cleanup
• act
• fireEvent

---

@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 使用合成事件系统，而 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)