フロントエンドのCIを整える

[Tatsumi0000]

💪 やること

• フロントエンド（Vue3 + Vitest）のテストが落ち続けています。
  • Vuetify周りで落ちてるっぽいので良い感じにします。
• そしてテストを書く

✅ 解決したいこと

• Vueのテストに失敗するのを解決する

🥅 このissueのゴール

• Vueのテストが動く
• CIも動く
• 各コンポーネントのテストも書く

📝 関連

[Tatsumi0000]

VuetifyとVitestでのテストについてVuetifyに公式ドキュメントがあるのでこれをならっていきます。

• https://vuetifyjs.com/en/getting-started/unit-testing/#usage

[Tatsumi0000]

Vuetifyの方はvite.config.tsにやってたけど、Vitest公式を見たら vitest.config.tsに設定を追加していたのでこっちの通りに新しくファイルを作ります。
あとVuetifyの方はimport { defineConfig } from "vitest";になってたけど、Vitest公式はimport { defineConfig } from "vitest/config";でした。configなしだとエラーになってたので、configありを使います。

エラーのログ

vite.config.ts
No overload matches this call. The last overload gave the following error. Argument of type '{ plugins: (Plugin_2 | Plugin_2[])[]; server: { host: true; }; resolve: { alias: { "@": string; }; }; test: { globals: boolean; environment: string; deps: { inline: string[]; }; }; }' is not assignable to parameter of type 'UserConfigExport'. Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'. 17:3:1 typescript2769
No overload matches this call. The last overload gave the following error. 17:3:1 ts2769

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    deps: {
      inline: ["vuetify"],
    },
  },
});

ref.

• Vitestの公式サイト

[Tatsumi0000]

あとついでにjsdomも入れました。

[Tatsumi0000]

vitestには既存の設定（vite.config.ts）とかを取り込みつつオリジナルの設定を作れるような機能があるっぽかったです。

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: "jsdom",
      deps: {
        inline: ["vuetify"],
      },
    },
  }),
);

これでテストを実行したらパスしました。ただ、Waringがでていたので少し修正しました。

Waringの内容

"deps.inline" is deprecated. If you rely on vite-node directly, use "server.deps.inlin
e" instead. Otherwise, consider using "deps.optimizer.web.include"

実際に置き換えたコード。

import { defineConfig, mergeConfig } from "vitest/config";
import viteConfig from "./vite.config";

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: "jsdom",
      server: {
        deps: {
          inline: ["vuetify"],
        },
      },
    },
  }),
);

vite-nodeは

[Vitest] でも使用されている [Vite] のビルドスタックを使って [Node.js] をアプリを直接実行する仕組み。

みたいです。テスト実行時は実際にブラウザでなにかしているわけではなく、Node.jsで何かしているはず…という期待を込めて、server.deps.inlineで設定をしています。これに変更してもテストをパスしているので間違ってはなさそう。

ref.

• Neokonote | vite-node
• Vitestでテストを実行すると出るエラーについて(Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.)

[Tatsumi0000]

CIは動くようになった