The current project utilizes ReactJS, Typescript, Webpack, and Jest. To optimize import and achieve module resolution, certain configurations were adjusted:
TSConfig.js:
"compilerOptions": { "baseUrl": "src",}Webpack.config.js
alias: {
Common: path.resolve(__dirname, 'src/Common/'),
},
Although the code is functioning as expected, Jest tests have started failing with the following error:
Cannot find module 'Common/js/utils' from 'MyContact.ts'This issue arises because Jest is not able to resolve Common to Src/common and is looking in node_module. To resolve this, the following adjustments were made:
jestConfig.js
moduleNameMapper: {"Common": "<rootDir>/src/Common"}This fix seems to have resolved the previous issue, but now a new problem has surfaced:
Jest encountered an unexpected token
This error typically occurs when Jest is unable to parse a file, indicating that it is not plain JavaScript.
By default, Jest uses a Babel config to transform files, excluding "node_modules".
You can address this issue by:
• Specifying a custom "transformIgnorePatterns" in your config to have some "node_modules" files transformed.
• Defining a "transform" option in your config for custom transformation.
• Stubbing out non-JS modules by using the "moduleNameMapper" config option for mocking.
For more details and examples of these config options, refer to the documentation:
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)
Below is the full jest.config.js file:
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"
]
}