Vue 3 tests fail with latest version of Nx and Jest

[ZachJW34]

Current Behavior

Vue 3 tests fail with latest version of Nx (v12.6.3) and Jest (v27)

Expected Behavior

Vue 3 tests should pass with latest version of Nx and Jest

Steps to Reproduce

1. npx create-nx-workspace@latest nx-vue --packageManager yarn --preset empty --nxCloud false && cd ./nx-vue
2. yarn add -D @nx-plus/vue @nrwl/{linter,cypress,jest}
3. nx g @nx-plus/vue:app my-app --vueVersion 3 --routing false --style css --babel false
4. nx test my-app

Failure Logs

> nx run my-app:test 
 FAIL   my-app  apps/my-app/tests/unit/example.spec.ts
  ● Test suite failed to run

    TypeError: Cannot destructure property 'config' of 'undefined' as it is undefined.

      at Object.getCacheKey (../../node_modules/vue-jest/lib/index.js:10:7)
      at ScriptTransformer._getCacheKey (../../node_modules/@jest/transform/build/ScriptTransformer.js:280:41)
      at ScriptTransformer._getFileCachePath (../../node_modules/@jest/transform/build/ScriptTransformer.js:351:27)
      at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:588:32)
      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:758:40)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:815:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.183 s
Ran all test suites.

———————————————————————————————————————————————

>  NX   ERROR  Running target "my-app:test" failed

  Failed tasks:
  
  - my-app:test

Environment

Plugin name and version: @nx-plus/vue@12.0.0

  Node : 14.16.1
  OS   : linux x64
  yarn : 1.22.10
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 12.6.3
  @nrwl/cypress : 12.6.3
  @nrwl/devkit : 12.6.3
  @nrwl/eslint-plugin-nx : 12.6.3
  @nrwl/express : Not Found
  @nrwl/jest : 12.6.3
  @nrwl/linter : 12.6.3
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.6.3
  @nrwl/web : Not Found
  @nrwl/workspace : 12.6.3
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[ZachJW34]

There is some work on this issue:
vuejs/vue-jest#344

[dpietrzyk]

Are there any updates on this issue?
I see that mentioned PR is still not merged (after 19 days) and I am struggling with vue 3 + nx + jest setup 3nd day :/
I tried versions 24, 25, 26, 27 and nothing seems to work :/

Resolve this issue will enable my project!

[ZachJW34]

@dpietrzyk just updated the PR. I'll get it merged and create a new release for this soon.

[ZachJW34]

Released in 12.2.0

[dpietrzyk]

@ZachJW34 Thanks! It is working now!
You saved me a lot of time!

Unfortunately nx migrate @nx-plus/vue don't update all packages related with @nx && jest.config for already created apps / libs.

So for all who can face this issue - there is one breaking change, you need to manually change in jest.config.js:

• for transform: vue-jest => vue3-jest
• for all properties in globals > vue-jest replace <rootDit> with absolute path e.g. <rootDir>/tsconfig.spec.json => apps/vue-app/tsconfig.spec.json,

Related errors:

Module vue-jest in the transform option was not found.

 TypeError: Cannot read property 'compilerOptions' of null

      at Object.process (../../node_modules/vue3-jest/lib/transformers/typescript.js:33:16)
      at processScript (../../node_modules/vue3-jest/lib/process.js:44:30)
      at Object.module.exports [as process] (../../node_modules/vue3-jest/lib/process.js:138:24)
      at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:612:31)
      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:758:40)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:815:19)