VitestのIn-source testingで躓いたことメモ

In-source テストの設定で罠に引っかかったのでメモしときます。

環境：

• MacOS Ventura
• Node.js 20.3.1
• Vite 4.4.9
• Vitest 0.34.1

その他はpackage.json参照

package.json

{
  "name": "solid-practice",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prettier": "prettier --write .",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
    "lint:html": "markuplint \"**/*.html\"",
    "test": "vitest"
  },
  "dependencies": {
    "solid-js": "^1.7.11"
  },
  "devDependencies": {
    "@solidjs/testing-library": "^0.8.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "eslint": "^8.47.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-standard-with-typescript": "^37.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-n": "^16.0.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-solid": "^0.12.1",
    "jsdom": "^22.1.0",
    "markuplint": "^3.12.0",
    "sass": "^1.65.1",
    "typescript": "^5.1.6",
    "vite": "^4.4.9",
    "vite-plugin-solid": "^2.7.0",
    "vitest": "^0.34.1"
  }
}

TypeError: Cannot read properties of undefined (reading 'registerGraph')

• 原因：　

  • 確証はないが、DomAPIかなんかをNode環境で動かそうとしているため、対象のメソッドが見つからない。

• メモ：　

  • vite.config.tsの中身を変えずにホットリロードだけさせる（スペースを一個入力して消すなどして）となぜかテストがパスする謎挙動を起こした。
    テストが通る時だけ次の文言が出るため、言われた通りに設定を変更した。

"deps.registerNodeLoader" is deprecated.If you rely on aliases inside external packages, use "deps.optimizer.web.include" instead.

• やったこと： vite.config.tsの設定の見直し。下記オプションを追加

...
export default defineConfig({
  plugins: [solidPlugin()],
  // for the production build, enable this
  //define: {
  // +   'import.meta.vitest': 'undefined',
  // + },
  test: {
    environment: "jsdom",
    globals: true,
    includeSource: ["src/**/*.ts", "src/**/*.tsx"],
+   deps: {
+     optimizer: {
+       web: {
+         include: ["src/**/*.ts", "src/**/*.tsx"]
+       }
      }
    }
  }
});