Angular: Vitest Browser Modeへの移行とTesting Library Custom Matcher

DRANK

結論VitestのBrowser Modeで使うexpect APIにははじめからDOM要素向けカスタムマッチャが組み込まれているので @testing-library/jest-dom は必要ない。 LibraryAngularプロジェクトのユニットテスト環境をAngular CLI公式のVItestサポートに移行しても、Angular Testing Libraryは変わらず使える。いまとなってはTesting LibraryなしでAngularコンポーネントのテストを書くことは考えたくない。 Libraryを使ってテストを書く場合、アサーション用のカスタムマッチャを導入しているケースのほうが多いだろう。toBeVisibleやtoBeDisabledのようにDOM特有のアサーションを簡単にしてくれる。expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement() expect(screen.getByText('Visible Example')).toBeVisible() Karma/Jasmineであれば@testing-library/jasmine-dom 、Jestであれば @testing-library/jest-dom をインストールして、テストセットアップファイルでカスタムマッチャの登録をする必要がある。VitestのNode.js実行モードで同じことをするには、@testing-library/jest-dom/vitestをインポートすればよい。Jest版と同じカスタムマッチャをVitest互換で…