Turborepo環境に配置したNext.jsにVitestを入れようとして結構詰まったので色々メモりたい。
公式にもサンプルが配置されてる。
next.js/examples/with-vitest at canary · vercel/next.js
コードを見た限りだとtesting-library/jest-domが有効にされてないように見えるので、matcherが使えない気が？
このPRでサポートされた。
v6.0.0のリリースに入ったぽいので、比較的最近導入された模様。
Release v6.0.0 · testing-library/jest-dom
これによってこれまでは 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よりはTSネイティブな感じがあるのと、Viteから派生しただけあってESM標準に作られてるのが良かった。
あと、不要なライブラリをほとんど導入しなくて良いのでJestよりはだいぶスマートな感じ。
とはいえ、JestはNext.jsが公式に next/jest というパッケージでサポートしている（next.js/examples/with-jest）ので、エコシステム的にはJestに軍配が上がるかなという印象。