Azure Pipeline - Caching NPM - Jest Unexpected token ] - jestjs

Question

I have a monorepo with Lerna and yarn workspaces. I use Azure Devops to build and publish the application.
Commands
"emis-app:test": "yarn --cwd apps/my-app test", is located on the root package.json
What works
When there is a cache miss or when I don't cache NPM modules,
yarn my-app:test which then trigger yarn --cwd apps/my-app test is successful
What does not work
When the cache is used yarn emis-app:test which then triggers yarn --cwd apps/my-app test does not work and tests are failing.
Here is the output of the cache hit
Resolving key:
- **/yarn.lock, !**/node_modules/**/yarn.lock, !*... [file pattern; matches: 4]
- s/apps/my-app/yarn.lock --> 0E8B2ACAB9CF0A6F80305D0BD6C99FDFA703EE248C33DB254DF57F46CC67B6AF
- s/apps/my-app-1/yarn.lock --> 95AB055F93FBE7A5E118B9C1391F81E1E9885D5ED5F0B6EAAB46985D0619C81D
- s/libs/my-lib/yarn.lock --> C8B48CB9F78F4AAE95941EE10588B139FEE51E2CEDA3313E7FE2B78A32C680B0
- s/yarn.lock --> 31D5354CDC72614EEE3B29335A5F6456576FAEF27417B811967E7DDA9BD91E48
Workspaces
"workspaces": {
"packages": [
"apps/*",
"libs/*"
]
}
Each app is a vue application. Each app contains its own package.json, babel.config, jest.config etc.
jest.config.base extended in each app.
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/typescript-and-babel',
transform: {
'vee-validate/dist/rules': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
'^.+\\.(ts|tsx)$': 'ts-jest',
},
testMatch: [
'**/*.(spec|test).(js|jsx|ts|tsx)',
],
testEnvironmentOptions: {
// Allow test environment to fire onload event
// See https://github.com/jsdom/jsdom/issues/1816#issuecomment-355188615
resources: 'usable',
},
reporters: [
'default',
[
'jest-trx-results-processor',
{
outputFile: './coverage/test-results.trx',
defaultUserName: 'user name to use if automatic detection fails',
},
],
],
moduleFileExtensions: [
'js',
'ts',
'json',
'vue',
],
testURL: 'http://localhost/',
snapshotSerializers: [
'jest-serializer-vue',
],
runner: 'groups',
};
jest.config (my-app)
const baseConfig = require('../../jest.config.base');
const packageJson = require('./package.json');
module.exports = {
...baseConfig,
transformIgnorePatterns: [],
roots: [
'<rootDir>/src',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^#libs/registration-lib/(.*)$': '<rootDir>/../../libs/registration-lib/src/$1',
},
name: packageJson.name,
displayName: packageJson.name,
};
Questions
Am I using the cache correctly?
Is it possible to use the caching when working with workspaces
Errors
FAIL #apps/my-app src/ui/views/pages/registration/individual/Individual.vue.spec.js
● Test suite failed to run
Jest encountered an unexpected token
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:
SyntaxError: Unexpected token ] in JSON at position 467
at JSON.parse (<anonymous>)
at parse (../../node_modules/tsconfig/src/tsconfig.ts:195:15)
at readFileSync (../../node_modules/tsconfig/src/tsconfig.ts:181:10)
at Object.loadSync (../../node_modules/tsconfig/src/tsconfig.ts:151:18)
at find (../../node_modules/vue-jest/lib/load-typescript-config.js:33:39)
at loadTypescriptConfig (../../node_modules/vue-jest/lib/load-typescript-config.js:73:26)
at compileTypescript (../../node_modules/vue-jest/lib/compilers/typescript-compiler.js:9:20)
at processScript (../../node_modules/vue-jest/lib/process.js:23:12)
at Object.module.exports [as process] (../../node_modules/vue-jest/lib/process.js:42:18)
at ScriptTransformer.transformSource (../../node_modules/#jest/transform/build/ScriptTransformer.js:453:35)
Pipeline YAML
- task: NodeTool#0
inputs:
versionSpec: '15.x'
displayName: 'Install Node.js'
- task: Cache#2
displayName: Cache yarn packages
inputs:
key: '**/yarn.lock, !**/node_modules/**/yarn.lock, !**/.*/**/yarn.lock'
path: $(Build.SourcesDirectory)/node_modules
cacheHitVar: CACHE_HIT
- task: Yarn#3
condition: ne(variables['CACHE_HIT'], 'true')
inputs:
customRegistry: 'useFeed'
customFeed: ${{ parameters.packageFeed }}
arguments: --frozen-lockfile
displayName: 'Install NPM dependencies'
- script: yarn my-app:test
displayName: "Test My App"