SvelteKitでPlaywrightコンポーネントテストを行う注意点

この記事はSvelteKit Advent Calendar 2022の5日目の記事です。

今日から3日間、SvelteKit Advent Calendarを書かせていただきます。@kubotakです。

さて、この記事ではSvelteKitでPlaywrightコンポーネントテストを行う方法を紹介します。
前提として、Playwrightとはなにか？みたいな話やSvelteコンポーネントのテスト方法などは以前私が発表した内容をご参照ください。

SvelteKitでPlaywrightコンポーネントテストを行う

先程紹介したSvelteコンポーネントのテストですが、SvelteKitではうまく動かないケースがあります。
それはSvelteKitが提供しているモジュールを使ったコンポーネントです。

$app/や$env/から始まるモジュールを呼び出しているコンポーネントをPlaywrightでテストしようとしてもそのモジュールのインポートが解決できません。
また、SvelteKitではsrc/libディレクトリに$libというエイリアスを持っているのでこれもそのままでは解決できません。

そこで、playwright.config.tsに以下のAliasを追加します。

playwright.config.ts

const config: PlaywrightTestConfig = {
  // 略
  use: {
    ctViteConfig: {
      resolve: {
        alias: [
          // SvelteKit固有の$libエイリアス
          {
            find: '$lib',
            replacement: `${__dirname}/src/lib`
          },
          // SvelteKit固有のモジュール$appのエイリアス
          {
            find: '$app',
            replacement: `${__dirname}/playwright/mock/app`
          }
        ]
      }
    }
  }
}

export default config

playwright/mock/appディレクトリには対応するモックライブラリを事前に準備しておきましょう。

例）

playwright/mock/app/environment.ts

const browser = true
const dev = true
export { browser, dev }

このモックは$app/environmentを呼び出してbrowserやdevをimportしている箇所に相当します。
似たような要領で必要なモックを作成し差し込むことで期待した挙動を作り出すことができます。

Help
テスト毎にモックを差し替えたい場合はこの方法だと実現できません。

もっとイケてる方法をご存じの方はぜひコメントください。
また、コンポーネントの見た目の状態のテストとしてPlaywrightコンポーネントテストを用いるのが適切だと思っていて、ロジックをテストする場合はVitestとTesting Libraryを用いるほうが良いと思います。それについては明日の記事で紹介したいと思います！