我正在嘗試為我使用 @import 的反應應用程式運行測驗，例如
import { something } from "@atoms";
我在 tsconfig.json 檔案中進行了映射，它在我運行應用程式時正確使用（命令：“webpack serve --port 9004”）但是當我嘗試測驗時（命令“cross-env BABEL_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/**/*"]
}
uj5u.com熱心網友回復：
我使用 tsconfig-paths-jest npm 包添加它以使用來自 tsconfig.json 的路徑。
要將它添加到我的 Jest 設定中，我在 jest 配置腳本檔案 (.js) 中有這個
const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);
module.exports = {
moduleNameMapper,
...
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/455835.html