こんにちは。
晩ごはんのレパートリーに頭を悩ませているはこだてたろうです。
妻が出産のときに入院していた産院のごはんがバランス良くて参考にしたいのですが、いざあれを作ろうとするとなかなか大変です。
仕事だからと言えばそれまでですが、バランスよくておいしくてをコンスタントに提供できるのはすごいなぁと思います。
さて、前回の記事では、Perplexityに聞いてVite×React×TestingLibraryの環境をサクッと立ち上げました。
動作自体は問題なかったのですが、設定面で少し問題があったので、その後対応した内容についてシェアしたいと思います。
vite.config.ts で型エラーがでていた
ことの発端はvite.config.ts で型エラーが起きていたことでした。
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: './src/test/setup.ts',
}
})7行目のtest のところでコンパイルエラーが出ていました。
TS2769: No overload matches this call.
The last overload gave the following error.
Object literal may only specify known properties, and test does not exist in type UserConfigExport
「defineConfig の引数のオブジェクトの型にtest なんてものはないっすよ」というエラーですね。
テスト実行自体はできているのですが、コンパイルエラーが出続けているのは気持ち悪いので解消するために少し調べました。
/// <reference types=”vitest” /> ってなんだ？
まずは現状を確認するため、vite.cofing.ts 内でよくわからない記述があったので調べました。
vite.config.ts ファイルの先頭に/// <reference types="vitest" /> という一文がありました。
見慣れないものだったので、こちらもPerplexityに聞いてみました。
/// <reference types=”vitest” /> この部分について解説してください
/// <reference types="vitest" />はトリプルスラッシュ・ディレクティブと呼ばれる特別なコメントで、TypeScriptコンパイラに対して指示を出すために使用されます26。この特定のディレクティブは以下の役割を果たします：
- 依存関係の宣言: このディレクティブは、現在のファイルが
vitestパッケージの型定義に依存していることを宣言します2。- 型の参照:
vitestパッケージで定義されている型や宣言を現在のファイルで使用できるようにします2。- コンパイル時の型情報の提供: TypeScriptコンパイラに対して、
@types/vitestパッケージ（またはvitestパッケージに含まれる型定義）を参照するよう指示します12。このディレクティブを使用することで、
vitestの型定義が自動的にプロジェクトに含まれ、関連する型や関数を型安全に使用できるようになります。これにより、IDEの補完機能やコードチェックが強化され、vitest関連のコードを書く際のエラーを防ぐことができます6。注意点として、このディレクティブは通常、手動で作成した.d.tsファイルでのみ使用することが推奨されます。TypeScriptコンパイラが自動生成する宣言ファイルには、必要に応じて自動的に追加されます2。
TypeScriptコンパイラに対する指示をするためのもののようです。
types="vitest" なので、Vitest関連の型情報を補完してくれているのでしょう。
でも、そこで思いました。
「ん？ではなんでtest でエラーが起きてるんだ？」
こちらの記事などを見ましたが、やはりtest のコンパイルを通すための記述のよう。
「defineConfigをvitest/configからインポートせよ」というのもありましたが、それをすると今度はplugins: [react()] の方でエラーになってしまうので解決には至りませんでした。
これに関しては、結局のところtestの設定値をvitest.config.tsに抽出することで落ち着きました。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
environment: 'jsdom',
globals: true,
setupFiles: './src/test/setup.ts',
}
});テストファイルの expect でコンパイルエラー
テストファイルにもコンパイルエラーが起きていたので修正しました。
import { describe, it } from 'vitest'
import { render, screen } from '@testing-library/react'
import App from './App'
describe('App', () => {
it('renders headline', () => {
render(<App />)
const headline = screen.getByText(/Vite \+ React/i)
expect(headline).toBeInTheDocument()
})
})
上記はPerplexityに生成してもらったテストコードですが、expect の行でCannot find name expectのコンパイルエラーが出ていました。
1行目でexpect をインポートしていないから当たり前ではあるのですが、vitest.config.tsにはglobals: true の設定があるので参照が通るはずですし、なんなら1行目もごそっと消しちゃってもいいはずです。
最終的には、tsconfig.app.json に vitest のグローバル型定義の設定を追加することでコンパイルエラーが解消しました。
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"types": ["vitest/globals"],vitest.config.ts で globals: true の設定をしていたのでテスト実行自体はできたけど、コンパイラの設定が足りてなかったからコンパイルエラーが出ていた、というのが顛末でした。
TypeScript を使うときは、いま起きているエラーがコンパイルエラーなのか実行時エラーなのか、コンパイル設定に問題があるのか実行コードに問題があるのか、現状をしっかりと把握することが大事ですね！
最後に、App.test.tsx の1行目も削除できるようになったので消してしまいましょう。
//import { describe, it } from 'vitest'動くコードはすぐできる。でも…
いかがだったでしょうか？
前回の記事から引き続き、Perplexity に聞いてVite×React×TestingLibraryの環境を構築してみました。
ご覧のとおり、Perplexityにお願いするだけで環境構築がサクッと終わってしまうので、便利な世の中になったな〜とびっくりしています。
ただ、今回のように微妙に設定が足りない部分もあったりするので、多少の調整はまだ必要です。
動くコードはすぐできるけど、それを鵜呑みにせずに上司とか先輩になったつもりで、生成されたコードのレビューをすることを忘れないようにしましょう！
コメント