Support Jest 28 with `@vue/cli-plugin-unit-jest`

[sceee]

What problem does this feature solve?

Since Jest 18 was released ( https://jestjs.io/blog/2022/04/25/jest-28 ), it would be preferable if @vue/cli-plugin-unit-jest also supports it.

There is also already a version 28 for ts-jest available that is compatible with Jest 28.

What does the proposed API look like?

n/a

[WIStudent]

Support Jest 18 with @vue/cli-plugin-unit-jest

I think you mean jest 28 instead of 18 😉

[realityfilter]

And @vue/vue3-jest is now at 28.0.0 too.

[msmosavar]

It'd be nice if you add support for jest v28. Waiting for it :)

[trent-abc]

This is breaking my build, any suggestions (tried deleting package-lock & node_modules) or I have to just wait for the upgrade?

npm install
...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/ts-jest
npm ERR!   dev ts-jest@"28.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional ts-jest@"^27.0.4" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-unit-jest
npm ERR!   dev @vue/cli-plugin-unit-jest@"^5.0.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[WIStudent]

@trent-abc You need to use ts-jest 27.

npm install -D ts-jest@27

[Tofandel]

Yes but the way this is made currently feels like a pain, 1 package that updates, then one vue package that follows up, then the vue-cli-plugin package that needs to follow up. A big chain of update..

Either version range should be more lax in the vue-cli-plugin or there should be autoupgrades with renovate, otherwise updates takes months before they make it to the vue-cli plugin

It's the same issue with eslint

[xwnwho]

any good news?

[markhalliwell]

This is holding up our upgrades to Jest 28.

[Vahelnir]

vue-jest added support for the

[iamface]

This is holding up our upgrades to Jest 28.

This is blocking me as well. My test coverage is failing https://github.com/vuejs/vue-cli/issues/7040 and the source maps were only fixed for v28 https://github.com/vuejs/vue-jest/pull/486 so I'm unable to upgrade and resolve being stuck at 27.

npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: @vue/[email protected]
npm ERR! node_modules/@vue/vue2-jest
npm ERR!   dev @vue/vue2-jest@"^28" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @vue/vue2-jest@"^27.0.0-alpha.3" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-unit-jest
npm ERR!   dev @vue/cli-plugin-unit-jest@"~5.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @vue/[email protected]
npm ERR! node_modules/@vue/vue2-jest
npm ERR!   peerOptional @vue/vue2-jest@"^27.0.0-alpha.3" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-unit-jest
npm ERR!     dev @vue/cli-plugin-unit-jest@"~5.0.0" from the root project

[schirrel]

Any update on it?

[nfantone]

Same over here trying to install @vue/[email protected] along with latest @vue/vue2-jest.

❯ npm i --save-dev @vue/cli-plugin-unit-jest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: @vue/[email protected]
npm ERR! node_modules/@vue/vue2-jest
npm ERR!   dev @vue/vue2-jest@"^29.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @vue/vue2-jest@"^27.0.0-alpha.3" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-unit-jest
npm ERR!   dev @vue/cli-plugin-unit-jest@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @vue/[email protected]
npm ERR! node_modules/@vue/vue2-jest
npm ERR!   peerOptional @vue/vue2-jest@"^27.0.0-alpha.3" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-plugin-unit-jest
npm ERR!     dev @vue/cli-plugin-unit-jest@"*" from the root project

[markhalliwell]

Not to sound insensitive (I know how dev work goes), but can we please get a release that supports jest 29? We cannot upgrade anything related to jest because of this package.

[darrinmn9]

I was able to successfully upgrade to jest 28/29, but it does require the use of resolutions (yarn) / overrides (npm).

"devDependencies": {
    "@vue/cli-plugin-unit-jest": "^5.0.8",
    "@vue/vue2-jest": "^29.0.0",
    "jest-environment-jsdom": "^29.0.0"
},
"resolutions": {
    "jest": "^29.0.0",
    "babel-jest": "^29.0.0"
},

Ofcourse you'll have to address any jest breaking changes in your codebase. (My project is in JS, TypeScript might require more changes)

upgrade guides: https://jestjs.io/docs/28.x/upgrading-to-jest28 https://jestjs.io/docs/upgrading-to-jest29

[ErikBjare]

After updating all my jest-related deps to ^29, and much frustration trying the resolutions/overrides trick by @darrinmn9 above, I ended up with:

  "overrides": {
      "@vue/cli-plugin-unit-jest": {
          "ts-jest": "$ts-jest",
          "@vue/vue2-jest": "$@vue/vue2-jest"
      }
  }

It resolved, and I then got the following error when running with npm test:

 TypeError: Cannot read properties of undefined (reading 'testEnvironmentOptions')
   at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:63:28)

Same error happens for jest-environment-node/NodeEnvironment. I added some print statements and figured the config wasn't being loaded by vue-cli-service unit:test correctly.

I figured calling jest directly would work around this, so I changed my package.json script "test" to call jest directly:

  "scripts": {
    "test": "jest",
    ...
  }

Which works! I still have the @vue/cli-plugin-unit-jest dependency for the preset: '@vue/cli-plugin-unit-jest' config option in jest.config.js.

[kepi0809]

After updating all my jest-related deps to ^29, and much frustration trying the resolutions/overrides trick by @darrinmn9 above, I ended up with:

  "overrides": {
      "@vue/cli-plugin-unit-jest": {
          "ts-jest": "$ts-jest",
          "@vue/vue2-jest": "$@vue/vue2-jest"
      }
  }

It resolved, and I then got the following error when running with npm test:

 TypeError: Cannot read properties of undefined (reading 'testEnvironmentOptions')
   at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:63:28)

Same error happens for jest-environment-node/NodeEnvironment. I added some print statements and figured the config wasn't being loaded by vue-cli-service unit:test correctly.

I figured calling jest directly would work around this, so I changed my package.json script "test" to call jest directly:

  "scripts": {
    "test": "jest",
    ...
  }

Which works! I still have the @vue/cli-plugin-unit-jest dependency for the preset: '@vue/cli-plugin-unit-jest' config option in jest.config.js.

I can confirm, this solution works. Thanks for sharing @ErikBjare

[artikhurana]

overrides

Where we need to add this overrides? Could you please help me. I'm also facing same issue

[kepi0809]

overrides

Where we need to add this overrides? Could you please help me. I'm also facing same issue

It goes into your package.json, if you use yarn then the syntax could be different though. (resolutions I think but I didn't test with yarn)

[lokeswari9]

will this also add support for @vue/vue3-jest to v28 and v29 because its the same issue I am migrating my vue 2 project to vue 3 and i am stuck figuring out the versions for updating my test cases