Azure Pipeline - Caching NPM - Jest Unexpected token ]

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"