jest-dom

jest-dom 是 Testing Library 的配套函式庫，為 Jest 提供自訂的 DOM 元素匹配器

npm
Yarn

npm install --save-dev @testing-library/jest-dom

yarn add --dev @testing-library/jest-dom

然後按照 jest-dom 文件中的使用方式章節將匹配器添加到 Jest 中。

import {screen} from '@testing-library/dom'

test('uses jest-dom', () => {
  document.body.innerHTML = `
    <span data-testid="not-empty"><span data-testid="empty"></span></span>
    <div data-testid="visible">Visible Example</div>
  `

  expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
  expect(screen.getByText('Visible Example')).toBeVisible()
})

注意：當使用其中一些匹配器時，您可能需要確保使用查詢函數（例如 queryByTestId）而不是 get 函數（例如 getByTestId）。否則，get* 函數可能會在您的斷言之前拋出錯誤。

請查看 jest-dom 的文件，以取得可用匹配器的完整列表。

GitHub 上的 jest-dom