В проекте используются ReactJS, Typescript, Webpack и Jest. Чтобы добиться разрешения модуля (чтобы минимизировать импорт), мы внесли следующие изменения:
TSConfig.js:
"compilerOptions": { "baseUrl": "src",}
Webpack.config.js
alias: {
Common: path.resolve(__dirname, 'src/Common/'),
},
Код работает нормально, однако Jest-тесты начали давать сбой с ошибкой:
Cannot find module 'Common/js/utils' from 'MyContact.ts'
Это потому, что Jest еще не знает, как разрешить Common для Src / common и непосмотри в node_module. Чтобы исправить это, были внесены следующие изменения:
jestConfig.js
moduleNameMapper: {"Common": "<rootDir>/src/Common"}
Это кажется исправленным, но тогда у меня есть другая проблема [именно поэтому я здесь:)]
Jest обнаружил неожиданный токен
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:\Users\ua\Project\develop\src\Common\index.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './Acc'
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
Вот полный файл jest.config.js:
module.exports = {
verbose: false,
roots: ["<rootDir>/src"],
transform: {
"^.+\\.tsx?$": "ts-jest",
},
globals: {
'ts-jest': {
diagnostics: false
}
},
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|pcss)$": "<rootDir>/__mocks__/styleMock.js",
"Common": "<rootDir>/src/Common",
},
snapshotSerializers: ["enzyme-to-json/serializer"],
setupFilesAfterEnv: ["<rootDir>/setupEnzyme.ts"],
testMatch: [ "**/__tests__/**/*.test.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
collectCoverageFrom: ["**/*.{ts,tsx}", "!**/node_modules/**", "!**/vendor/**"]
};
tsconfig.js:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "src",
"typeRoots": [
"./node_modules/@types",
"./custom_typings"
],
"outDir": "build",
"module": "commonjs",
"skipLibCheck": true,
"moduleResolution": "node",
"removeComments": true,
"target": "es5",
"sourceMap": true,
"lib": [ "dom", "es2015", "es2017", "esnext" ],
"noEmit": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": false,
"allowUnusedLabels": false,
"jsx": "react",
"allowJs": true,
"isolatedModules": false,
"strictNullChecks": false,
"noEmitHelpers": false,
"allowSyntheticDefaultImports": true
},
"typeRoots": [
"./node_modules/@types",
"./custom_typings"
],
"exclude":[
"./node_modules"
],
"include": [
"src/*",
"custom_typings"
]
}