Solid JS + Viteのテスト環境(Vitest)

tusko

Solid JS, Vite(, Typescript)環境におけるテスト導入に手間取ったので覚書

tusko

公式ドキュメントに倣って、Jestやuvuの導入を試みたが、コンポーネント内で利用していたviteのglob importが悪さをするのか、エラーが出力される。

なんらかの設定で、対応可能かもしれないが、郷に入れば郷に従えということで？、Vitestの導入を試みた。

tusko

導入は超簡単で、

npm install -D vitest

そしてviteの設定を追加する。

// vite.config.ts
export default defineConfig({
  // 他の何か
  test: {
    environment: 'jsdom',
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    deps: {
      inline: [
        /solid-js/,
      ],
    },
  },
 // 他の何か
}

ところが、コンポーネントテストを行うと、

SyntaxError: The requested module 'solid-js/web' does not provide an export named 'hydrate'

のエラーが生じる。'hydrate'ではなくて'render'パターンもあるらしい。これは、他の方も既に記しているようにnpmやyarn利用時に生じるトラブルらしい。pnpmを用いれば解決可能なようだが、試していない。

tusko

エラーの原因と解決策が先日見つけられたようなので、こちらを参考に

// vite.config.ts
deps: {
  inline: [
    /solid-js/,
    /solid-testing-library/,  // 追加
  ],
},

の一行を追加することで解決。

tusko

coverageが機能していなかったが、pnpm利用の環境だと上手くいった。

このスクラップは2022/07/08にクローズされました