Sharing my new QA issue to discuss my recent findings. I encountered the same error mentioned on SO, but the root cause of my problem was different. Reference: Jest: TypeError: Cannot read property of undefined
The specific error message I faced was "TypeError: Cannot read property 'apiUrl' of undefined". Despite having set esModuleInterop and allowSyntheticDefaultImports in tsconfig.json, I couldn't figure out why this error was occurring.
The error was happening within the service consumer:
import Axios from 'axios';
import config from '@/services/config.service';
const axios = Axios.create({
baseURL: config.apiUrl || undefined,
^^^^^^
...
});
The config services exported const config both as a named export and a default export:
export let config: AppConfig;
...
config = {...}
...
export default config;
This is how my tsconfig.json looks:
{
"compilerOptions": {
// Compiler options here...
},
"include": [
"src/main.ts",
"src/types/**/*",
"src/WS_UIkit/src/types/**/*"
],
"exclude": ["node_modules"]
}
Here's my jest.config.js:
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
// testMatch: ['**/*.spec.[jt]s?(x)],'
testMatch: ['**/*.spec.ts'],
moduleNameMapper: {
// Additional configurations...
},
transformIgnorePatterns: ['node_modules/(?!(quasar|quasar/*))'],
};
And finally, my babel configuration:
module.exports = {
presets: ['@vue/app'],
plugins: [
// Babel plugins here...
],
};