开玩笑：找不到以别名开头的模块'@'

Question

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

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

我犯了这个错误。

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

我想Jest无法解析以"@"开头的模块。也许我应该写一个moduleNameMapper？我也试着安装了vite-jest，但不知怎么的，我的应用程序崩溃了，也许我搞砸了什么。

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

谢谢。

Answer 1

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

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

此外，如果您正在使用TypeScript，您也应该将以下内容添加到tsconfig.json文件中：

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