Vite with Jest：找不到以别名“@”开头的模块

Question

我在 Vite 中使用 Jest。它一直有效，直到我从 node_module 导入模块。

\n

import { defineComponent } from 'vue'\nimport { useCookies } from '@vueuse/integrations/useCookies'\n

\n

我收到这个错误。

\n

 FAIL  src/components/MyComponent/index.test.ts\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module '@vueuse/integrations/useCookies' from 'src/components/MyComponent/index.vue'\n\n    Require stack:\n      src/components/MyComponent/index.vue\n      src/components/MyComponent/index.test.ts\n\n      16 | <script lang="ts">\n      17 | import { defineComponent } from 'vue'\n    > 18 | import { useCookies } from '@vueuse/integrations/useCookies'\n         | ^\n      19 |\n      20 | export default defineComponent({\n\n      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)\n

\n

我想 Jest 无法解析以“@”开头的模块。也许我应该写一个 moduleNameMapper ？我也尝试安装 vite-jest，但不知何故我的应用程序崩溃了，也许我搞砸了一些东西。

\n

不管怎样，感谢您抽出时间，如果您需要更多信息，例如我的 jest.config.js 或 vite.config.ts，请告诉我。

\n

谢谢。

\n

Answer 1

在文件中使用moduleNameMapper ，jest.config.js如下所示：

module.exports = {
  //...
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

另外，如果您使用 TypeScript，您还应该将以下内容添加到您的tsconfig.json文件中：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src"]
    }
  }
}