vue3-jest Issue : nx test myAppName

[Shin-Beomchul]

Current Behavior

"TypeError: babelJest.getCacheKey is not a function" issue occurred when running the jest test immediately after executing "nx g @nx-plus/vue:app auto-trading".

npx nx test auto-trading

The cause is shallowMount. code If I annotation out shallowMount it works.

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '../../src/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
   // const msg = 'new message';
   // const wrapper = shallowMount(HelloWorld, {
   // props: { msg },
   // });
    expect("A").toMatch("A");
  });
});

then success

Expected Behavior

I would like to see vue component tests.

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '../../src/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
    props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

Steps to Reproduce

## step 1 : Nx Workspace
 npx create-nx-workspace@^14.0.0

## step 2 : Peer Dependencies
yarn add @nrwl/cypress@^14.0.0 @nrwl/jest@^14.0.0 @nrwl/linter@^14.0.0 --dev

## step 3 : nx-plus/vue plugin install
yarn add @nx-plus/vue --dev

## step 4 : generate app
npx nx g @nx-plus/vue:app auto-trading (all default option selected)
  name: auto-trading
  babel with Typescript : false
  vue version ? : 3

## step 5 : run jest Test 
npx nx test auto-trading

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

npx nx test auto-trading

then faill

 nx run auto-trading:test
 FAIL   auto-trading  apps/auto-trading/tests/unit/example.spec.ts
  ● Test suite failed to run

    TypeError: babelJest.getCacheKey is not a function

      at Object.getCacheKey (../../node_modules/vue3-jest/lib/index.js:13:19)
      at ScriptTransformer._getCacheKey (../../node_modules/@jest/transform/build/ScriptTransformer.js:278:41)
      at ScriptTransformer._getFileCachePath (../../node_modules/@jest/transform/build/ScriptTransformer.js:349:27)
      at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:595:32)
      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:822:19)

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

Environment

Plugin name and version: yarn version : 1.22.19 node : v16.14.2

etc

mono root package.json

{
  "name": "nx-vue",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "postinstall": "node node_modules/@nx-plus/vue/patch-nx-dep-graph.js"
  },
  "private": true,
  "dependencies": {
    "tslib": "^2.3.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@nrwl/cli": "14.8.6",
    "@nrwl/cypress": "^14.0.0",
    "@nrwl/eslint-plugin-nx": "14.8.6",
    "@nrwl/jest": "^14.0.0",
    "@nrwl/linter": "^14.0.0",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/workspace": "14.8.6",
    "@nx-plus/vue": "^14.1.0",
    "@types/jest": "28.1.1",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "cypress": "^10.7.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "jest-serializer-vue": "^2.0.2",
    "jest-transform-stub": "^2.0.0",
    "nx": "14.8.6",
    "prettier": "^2.6.2",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "~4.8.2",
    "vue3-jest": "^27.0.0-alpha.1"
  }
}

[ZachJW34]

I have recently published @nx-plus/vue@15.0.0-rc.0 which now used vue-cli v5 (webpack 5). I haven't published any docs/migrations yet but if you're curious you can try it out! It requires v15 of Nx.

I'm going to be working over the next week to write some docs and migrations so stay tuned!