使用'@'导入进行开玩笑测试

Question

我正在尝试为我的react应用程序运行测试，我在该应用程序中使用了@import，如

import { something } from "@atoms";

我在tsconfig.json文件中进行了映射，当我运行应用程序时(命令："webpack-serve-port9004"(，它被正确使用，但当我尝试测试(命令"cross-envBABEL_env=test-jest"(时，导入失败，并出现以下错误：

Configuration error:
Could not locate module @atoms mapped as:
[
"src/components/atoms/index"
].
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/@atoms/": "[
"src/components/atoms/index"
]"
},
"resolver": undefined
}
1 | import { ReactElement } from "react";
2 | 
> 3 | import { Something } from "@atoms";
| ^
4 | 
5 |
6 | export const SomethingElse = ({
at createNoMappedModuleFoundError (../node_modules/jest-resolve/build/resolver.js:579:17)
at Object.<anonymous> (components/molecules/SomethingElse/index.tsx:3:1)

jest.config.js:

const { compilerOptions } = require("./tsconfig.json");
module.exports = {
rootDir: "src",
testEnvironment: "jsdom",
transform: {
"^.+\.(j|t)sx?$": "babel-jest",
},
moduleNameMapper: {
"\.(sass)$": "identity-obj-proxy",
"single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs",
...compilerOptions.paths,
},
setupFilesAfterEnv: ["@testing-library/jest-dom"],
};

tsconfig.json:

{
"extends": "ts-config-single-spa",
"compilerOptions": {
"jsx": "react-jsx",
"target": "ES5",
"baseUrl": ".",
"paths": {
"@app/*": ["src/*"],
"@configs/*": ["src/configs/*"],
"@configs": ["src/configs/index"],
"@components/*": ["src/components/*"],
"@components": ["src/components/index"],
"@constants/*": ["src/constants/*"],
"@constants": ["src/constants/index"],
"@enums/*": ["src/enums/*"],
"@enums": ["src/enums/index"],
"@hooks/*": ["src/hooks/*"],
"@hooks": ["src/hooks/index"],
"@services/*": ["src/services/*"],
"@services": ["src/services/index"],
"@store/*": ["src/store/*"],
"@store": ["src/store/index"],
"@themes/*": ["src/themes/*"],
"@themes": ["src/themes/index"],
"@utils/*": ["src/utils/*"],
"@utils": ["src/utils/index"],
"@types/*": ["src/types/*"],
"@types": ["src/types/index"],
"@assets/*": ["public/assets/*"],
"@atoms": ["src/components/atoms/index"],
"@molecules": ["src/components/molecules/index"],
"@organisms": ["src/components/organisms/index"],
"@pages": ["src/components/organisms/pages/index"]
}
},
"files": ["src/main-file.tsx"],
"include": ["src/**/*"]
}

Answer 1

我使用tsconfig-paths-jest-npm包将其添加到tsconfig.json.

为了将它添加到我的Jest设置中，我在Jest配置脚本文件(.js(中有这个

const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);
module.exports = {
moduleNameMapper,
...
};