Electron アプリで renderer と main プロセスの vitest 設定を分ける - はるさめ.dev

背景

Electron アプリを開発していて、main プロセスと renderer で Test Environment を分けたかった。

開発環境は vite に使っていて、レンダラーは react & typescript、テストファイルは専用のフォルダを使わずにコロケーションしています。

解決方法

vitestの workspace 機能を使います。
vitest.workspace.ts をルートフォルダに作成することで設定を分離できます。

electron.vite.config.ts 側にエイリアスの設定などがあると思うので、 mergeConfig を使って設定をマージしています。

vitest.workspace.ts

import { mergeConfig } from 'vite'
import { defineWorkspace } from 'vitest/config'
import { main, renderer } from './electron.vite.config'

export default defineWorkspace([
  mergeConfig(renderer, {
    test: {
      include: ['src/renderer/**/*.test.{ts,tsx}'],
      name: 'renderer', // ユニークなプロジェクトの名前をつける
      environment: 'jsdom', // テスト環境として jsdom を指定
      setupFiles: ['vitest.setup.web.ts']
    }
  }),
  mergeConfig(main, {
    test: {
      include: ['src/main/**/*.test.ts'],
      name: 'main-test',
      environment: 'node'
    }
  })
])

electron.vite.config.ts 側はデフォルトだと defineConfig の中に直接設定が書いてありますが、main や renderer の型が UserConfigExport になってしまい、mergeConfig と型が合わないので以下のような形に書き換えています。

electron.vite.config.ts

import react from '@vitejs/plugin-react'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'
import { UserConfig } from 'vite'

export const main: UserConfig = {
  plugins: [externalizeDepsPlugin()]
}

export const preload: UserConfig = {
  plugins: [externalizeDepsPlugin()]
}

export const renderer: UserConfig = {
  resolve: {
    alias: {
      '@renderer': resolve('src/renderer/src'),
      '@': resolve(__dirname, './src/renderer/src')
    }
  },
  plugins: [react()]
}

export default defineConfig({
  main,
  preload,
  renderer
})

補足

vite の設定を関数形式で行っている場合はおそらく次の issue コメントを参考にしていただく必要がありそうです。
https://github.com/vitest-dev/vitest/issues/4687#issuecomment-1843181549

Looks like your vite.config returns a function (so config is defined in the form of defineConfig(() => {})). Documentation has an example on how to handle it (https://vitest.dev/config/#configuration):
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'

export default defineConfig(configEnv => mergeConfig(
  viteConfig(configEnv),
  defineConfig({
    test: {
      exclude: ['packages/template/*'],
    },
  })
))

参考

Workspace | Vitst