jest-dom

jest-dom は、Jest のためにカスタム DOM 要素の matcher を提供する Testing Library のコンパニオンライブラリです

npm
Yarn

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

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

次に、jest-dom のドキュメントの使用方法セクションに従って、Jest に matcher を追加します

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()
})

注: これらの matcher の一部を使用する場合、 get* ファンクション (getByTestId など) ではなく、クエリファンクション (queryByTestId など) を使用していることを確認する必要があります。それ以外の場合、get* ファンクションはアサーションの前にエラーを送出する可能性があります

利用可能なすべての matcher の完全なリストについては、 jest-dom のドキュメントを参照してください

GitHub の jest-dom