testing-library/jest-dom version6 について

testing-library/jest-dom の v6 リリースにて BREAKING CHANGES があったので確認メモです。

新機能

このバージョン6では、ローカルの型定義が導入され、jest、@jest/globals、vitest などのテストプラットフォームをサポートするようになりました。これにより、テストプラットフォームごとに適切な "expect" インスタンスを自動的に拡張するための新しい import パスが追加されました。

新しい import パスは以下の通りです：

• @testing-library/jest-dom - jest (@types/jest) をサポート

• @testing-library/jest-dom/jest-globals - @jest/globals をサポート

• @testing-library/jest-dom/vitest - vitest をサポート

例えば、次のように使います：

javascriptCopy codeimport '@testing-library/jest-dom/jest-globals'

上記のようなパスからインポートすることで、対応するテストプラットフォームの適切な matcher インターフェースが拡張されます。ただし、これを行うファイルは .ts ファイルであり、ユーザーの tsconfig.json に含まれている必要があります。

また、以下のように直接 matchers をインポートすることも引き続き可能です：

javascriptCopy codeimport * as matchers from '@testing-library/jest-dom/matchers'

破壊的な変更

このバージョンでは、extend-expect スクリプトが削除されました。代わりに、デフォルトのインポートパスまたは新しいテストプラットフォームごとのパスを使用して、適切な "expect" インスタンスを自動的に拡張することが推奨されています。extend-expect は Readme に文書化されていなかったため、この変更は影響が限定的だと考えられます。

これにより、より柔軟な方法でテストプラットフォームごとに適切な "expect" インスタンスを拡張できるようになりました。

また、バージョン6からは node のバージョン14以上が必要とされています。

要するに、バージョン6では新しい import パスが導入されて、extend-expect スクリプトが削除されました。これにより、テストプラットフォームごとに適切な "expect" インスタンスを自動的に拡張することが容易になりました。

各インポートパスについて

1. @testing-library/jest-dom - jest (@types/jest):
   このパスを使用すると、@testing-library/jest-dom ライブラリの機能が jest テストフレームワークで使用される場合に利用されます。@types/jest モジュールをサポートします。これは、TypeScript プロジェクトで jest の型情報を提供するためのものです。このインポートを行うことで、jest のテストコード内で jest-dom ライブラリの matchers や関数を使用することができます。
   例:　

import '@testing-library/jest-dom'; // jestの場合、@types/jestがサポートされます

1. @testing-library/jest-dom/jest-globals - @jest/globals:
   このパスを使用すると、@testing-library/jest-dom ライブラリの機能が @jest/globals をサポートする場合に利用されます。@jest/globals は、Jest のグローバルなオブジェクトと関数を提供するモジュールです。このインポートを行うことで、Jest のグローバルスコープ内で jest-dom ライブラリの matchers や関数を利用することができます。
   例:

import '@testing-library/jest-dom/jest-globals'; // @jest/globalsをサポートする場合

1. @testing-library/jest-dom/vitest - vitest:
   このパスを使用すると、@testing-library/jest-dom ライブラリの機能が vitest テストフレームワークで使用される場合に利用されます。vitest は、Visual Testing フレームワークの一部です。このインポートを行うことで、vitest テストコード内で jest-dom ライブラリの matchers や関数を使用することができます。
   例:

import '@testing-library/jest-dom/vitest'; // vitestをサポートする場合

要するに、プロジェクトで利用しているテストフレームワークに合わせて、適切なインポートパスを選ぶことで、@testing-library/jest-dom ライブラリの機能を最適に活用することができます。