Vue 3单元测试-找不到模块

Question

我对单元测试很陌生，但刚刚开始在Vue 3应用程序中编写一些。

在我测试的组件中，我从模型子文件夹中导入一些接口类型，如下所示：

import { ITEM } from "../models/product.models";

当在组件中时，这一切都很好，但在我的单元测试中，我得到了这个错误：

Cannot find module '../models/product.models' from 'Product.vue'

> 88 | import { ITEM } from "../models/product.models";
| ^
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)

我需要做什么才能让测试正确评估该导入？

这是我开玩笑的配置：

"jest": {
"globals": {
"vue-jest": {
"hideStyleWarn": true
}
},
"preset": "@vue/cli-plugin-unit-jest",
"testMatch": [
"**/src/**/*.spec.[jt]s?(x)"
],
"transform": {
"^.+\.vue$": "vue-jest"
},
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!primevue/.*)"
]
}

tsconfig.js

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"noImplicitAny": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"],
"exclude": [
"node_modules"
]
}

Answer 1

您应该在测试中导入如下：

import { ITEM } from "@/models/product.models";

@指向src文件夹。由于测试在另一个文件夹中，它应该可以工作