如何在 Nuxt3 中使用 vitest 中的路径？答案

【问题标题】：How to use paths in vitest with Nuxt3?如何在 Nuxt3 中使用 vitest 中的路径？
【发布时间】：2022-06-12 16:06:15
【问题描述】：

我有nuxt3_rc_3 项目并使用vitest 来测试我为项目编写的实用程序

utils/index.ts 从~~/config/constants 导入少量常量

在test/utils/index.test.ts 中编写测试时，我导入了一个函数来编写测试，当我运行测试时出现此错误

FAIL  test/utils/index.test.ts [ test/utils/index.test.ts ]
Error: [vite-node] Failed to load ~~/config/constants

我想问题是 vitest 没有阅读 ./.nuxt/tsconfig.json 进行相对路径查找，或者可能是其他错误，请帮忙。

nuxt3 的路径 tsconfig

...
"paths": {
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "assets": [
        "assets"
      ],
      "public": [
        "public"
      ],
      "public/*": [
        "public/*"
      ],
      "#app": [
        "node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "pinia": [
        "pinia/dist/pinia"
      ],
      "@intlify/shared": [
        "node_modules/@intlify/shared/dist/shared.esm-bundler"
      ],
      "@intlify/core-base": [
        "node_modules/@intlify/core-base/dist/core-base.esm-bundler"
      ],
      "@intlify/devtools-if": [
        "node_modules/@intlify/devtools-if/dist/devtools-if.esm-bundler"
      ],
      "vue-i18n": [
        "node_modules/vue-i18n/dist/vue-i18n.esm-bundler"
      ],
      "#head": [
        "node_modules/nuxt/dist/head/runtime"
      ],
      "#head/*": [
        "node_modules/nuxt/dist/head/runtime/*"
      ],
      "#components": [
        ".nuxt/components"
      ],
      "#imports": [
        ".nuxt/imports"
      ],
      "#build": [
        ".nuxt"
      ],
      "#build/*": [
        ".nuxt/*"
      ]
    }
...

【问题讨论】：

你有 2 个波浪号 ~~ 还是只有一个 ~？
@kissu 我已经用 nuxt 的路径配置更新了问题。它可以是整个应用程序中的任何内容。最初对我来说，我只使用~~

标签： testing nuxt.js nuxt3 vitest

【解决方案1】：

我有一些问题。我对这个问题没有任何想法。目前我已经开始讨论 nuxt 团队；也许他们可以帮助我们。

https://github.com/nuxt/nuxt.js/discussions/10480

【讨论】：

【解决方案2】：

在 vitest 配置中使用 nuxt 的 ts 配置路径作为别名解决了问题

// file alias.ts

import { resolve } from 'path'

const r = (p: string) => resolve(__dirname, p)

export const alias: Record<string, string> = {
  '~~': r('.'),
  '~~/': r('./'),
  '@@': r('.'),
  '@@/': r('./'),

  ... other paths
}

// vitest.config.ts
import { defineConfig } from 'vite'
import { alias } from './alias'

export default defineConfig({
  root: '.',
  esbuild: {
    tsconfigRaw: '{}',
  },
  resolve: {
    alias,
  },
})

【讨论】：

对于那些正在寻找与vitest.config.ts 一起使用的解决方案的人：使用以下内容：import { defineConfig } from "vitest/config"; import { alias } from "./alias"; export default defineConfig({ resolve: { alias, },