Vitest導入覚書き

Sat Sep 30 2023

Turborepo環境に配置したNext.jsにVitestを入れようとして結構詰まったので、いろいろメモしておきます。

Next.js公式のサンプル

公式にもサンプルが配置されています。

コードを見た限りだとtesting-library/jest-domが有効にされていないように見えるので、matcherが使えない気がします。

このPRでサポートされました。

v6.0.0のリリースに入ったようなので、比較的最近導入されたもののようです。

これによって、これまでは vitest.setup.ts などで

1import matchers from '@testing-library/jest-dom/matchers';
2import { expect } from 'vitest';
3
4expect.extend(matchers);

のようにしていたのが、

1import '@testing-library/jest-dom/vitest'

だけで良くなりました。

比較的新しめのライブラリなので、ネット上にある情報がほとんど参考になりませんでした。

とはいえJestよりはTypeScriptネイティブな感じがありますし、Viteから派生しただけあってESM標準に作られているのが良かったです。

また、不要なライブラリをほとんど導入しなくて良いので、Jestよりはだいぶスマートな印象です。

とはいえ、JestはNext.jsが公式に next/jest というパッケージでサポートしている（next.js/examples/with-jest）ので、エコシステム的にはJestに軍配が上がるかなという印象です。