🦁
【Vite×React】テスト環境構築のためにやったこと
Vite×Reactで構築中のアプリケーションに、VitestとRTLでテスト環境を構築する際にやったことをまとめます。
パッケージのインストール
npm i -D vitest @testing-library/react @testing-library/jest-dom jsdom
（書き漏らしてたらゴメソ・・）
package.jsonにscript追記
package.json
{
...
"scripts": {
...
+ "test:watch": "vitest",
+ "test:run": "vitest run"
},
vitest.setup.tsを作成
vitest.setup.ts
+ import matchers from '@testing-library/jest-dom/matchers'
+ import { expect } from 'vitest';
+
+ expect.extend(matchers); // expectのextendメソッドに拡張マッチャーを指定して拡張
+
vite.config.tsを編集
vite.config.ts
+ /// <reference types="vitest" />
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
...
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: ['./vitest.setup.ts'],
+ },
})
tsconfig.jsonを編集
tsconfig.json
{
...
"types": [
"node",
"vite-plugin-svgr/client",
+ "vitest/globals",
]
},
参考記事
Discussion