feat: update jest to v27 #6627

cexbrayat · 2021-08-08T18:24:37Z

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

Yes
No

Other information:

Fixes #6602

This commit updates the generated project to use:

jest v27, as an explicit dependency
ts-jest and babel-jest v27
vue3-jest as a transformer for Vue 3 projects
vue2-jest as a transformer for Vue 2 projects

The default Babel transformer has been updated to work with Jest v27 as well.

cexbrayat

@sodatea Here is a rough attempt to support Jest 27. I landed the support for Vue 2, that Lachlan published as @vue/vue2-jest for now. We're waiting for the definitive package name, but I can iron out this PR in the meantime.

cexbrayat · 2021-08-08T18:25:45Z

packages/@vue/cli-plugin-unit-jest/generator/index.js

-      'vue-jest': isVue3 ? '^5.0.0-0' : '^4.0.1',
+      'babel-jest': '^27.0.6',
+      'jest': '^27.0.5',
+      '@vue/vue2-jest': isVue3 ? undefined : '^27.0.0-alpha.1',


The package is temporarily published as @vue/vue2-jest, as someone squatted vue2-jest. @lmiller1990 is in the process of reclaiming it from NPM.

I emailed a few times but npm don't seem to respond. Maybe we need Evan to reach out.

Alternatively, we can just go with @vue/vue2-jest and @vue/vue3-jest... it seems pretty explicit. What do you think?

Fine by me. vue-jest is ready since PR vuejs/vue-jest#375, so we just need a release for @vue/vue3-jest I think

Fine by me, too. Using scoped names also helps avoid similar dilemmas when we have Vue 4…

I will release a new vue-jest within 24 of this post.

It took 48 hours but see here https://github.com/vuejs/vue-jest/releases/tag/v27.0.0-alpha.1

@vue/vue2-jest

@vue/vue3-jest

Vue Jest versioning is still really rough and confusing, since we are managing multiple versions in the same repo and release.

Hopefully this helps, we can push out another version if needed. I like the new versioning scheme - it's easy to understand.

cexbrayat · 2021-08-08T18:26:47Z

packages/@vue/cli-plugin-unit-jest/presets/default/jest-preset.js

+  // eslint-disable-next-line node/no-extraneous-require
+  const Vue = require('vue')
+  vueVersion = semver.major(Vue.version)
+} catch (e) {}


As we need to load a different transformer for Vue 2 and Vue 3, I hacked this code to retrieve the Vue version.
This might not be the best way, let me know what to do.

You can require vue/package.json and check its version field

cexbrayat · 2021-08-08T18:27:12Z

packages/@vue/cli-plugin-unit-jest/presets/no-babel/esmoduleTransformer.js

@@ -1,4 +1,4 @@
-const babelJest = require('babel-jest')
+const babelJest = require('babel-jest').default


babel-jest is now published as an ESM module.

cexbrayat · 2021-08-30T12:42:22Z

@sodatea I have some tests failing but I'm struggling to fix them locally.

When running yarn test -p unit-jest, the vue 3 projects are created outside of directory (in vue-upgrade-tests) and it looks like they are not using the modified version of the plugin (still using vue-jest v5 which is not mentioned anywhere in the source code now). Is there something else to do before running the command?

sodatea · 2021-08-30T13:46:59Z

Let's ignore the tests for now.

These tests are supposed to be run after the packages are published to a local registry. (See

vue-cli/scripts/test.js

Line 13 in 0f09454

const e2ePathPattern = 'Migrator|Vue3|mochaPlugin|MochaPlugin'

and https://github.com/vuejs/vue-cli/blob/0f094547e125961cd55f1bc961eb737d51cb36e8/scripts/e2e-test/run-e2e-test.sh)

But the publishing process seems to be broken due to a PostCSS issue.

Fixes vuejs#6602 This commit updates the generated project to use: - jest v27, as an explicit dependency - ts-jest and babel-jest v27 - @vue/vue3-jest as a transformer for Vue 3 projects - @vue/vue2-jest as a transformer for Vue 2 projects The default Babel transformer has been updated to work with Jest v27 as well.

cexbrayat · 2021-09-09T14:36:22Z

Thanks to @lmiller1990 the packages are now published as @vue/vue2-jest and @vue/vue3-jest

The PR is updated to reflect that

@sodatea Tests are still failing, and I don't think I'll be able to fix them without your help. Let me know what to do when you have time to check it out 🙏

sodatea · 2021-09-10T07:06:57Z

Please add "postcss": "8" to the root package.json.
Seems to be caused by incorrect hoisting of that package. The postcss@7 depended by vuepress is hoisted to the same level of postcss-dicard-comments@5, which requires postcss@8 as peer.

We must migrate to vitepress soon…

cexbrayat · 2021-09-10T10:37:55Z

@sodatea Thanks, there are now fewer failures, but the Vue 3 tests are still broken (maybe because of my code, but I don't see why).

The test for an app with Vue 3 and the unit-jest plugin checks for the presence of @vue/vue-test-utils v2 and @vue/vue3-jest v27. The plugin uses the same code to add both, but the test fails to find @vue/vue3-jest, whereas it finds VTU. I'm probably missing something obvious, but I don't see what...

sodatea · 2021-09-10T13:00:36Z

packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js

@@ -137,5 +137,24 @@ test('should work with Vue 3', async () => {
  })
  const pkg = JSON.parse(await project.read('package.json'))
  expect(pkg.devDependencies['@vue/test-utils']).toMatch('^2')
+  expect(pkg.devDependencies['@vue/vue3-jest']).toMatch('^27')


Please remove the Vue 3 tests in this file. They should be placed in the jestPluginVue3.spec.js so that they'll have the correct test environment setup. I think I forgot to remove this test case and it's a surprise that it still passed…

Alright I removed them (I already had the same tests in jestPlluginVue3.spec.js), and CI is green, thanks.

I don't see jestPluginVue3.spec.js on the CI though? Is it running?

Cool! It's running in the e2e job: https://app.circleci.com/pipelines/github/vuejs/vue-cli/1150/workflows/da9c2263-d7d7-4b0e-8f91-4d1c90303cae/jobs/27395

Awesome then, it should be working.

The PR is ready for your review!

cexbrayat commented Aug 8, 2021

View reviewed changes

cexbrayat force-pushed the chore/jest-27 branch from f2855eb to 6d59435 Compare August 8, 2021 18:40

sigveio mentioned this pull request Aug 25, 2021

test.each doesnt works with interpolation with object properties jestjs/jest#11704

Closed

cexbrayat mentioned this pull request Aug 26, 2021

Vue add unit-jest does not configure correctly vuejs/test-utils#887

Closed

cexbrayat force-pushed the chore/jest-27 branch 3 times, most recently from c2aac52 to 55ef4d8 Compare August 30, 2021 12:29

cexbrayat force-pushed the chore/jest-27 branch 2 times, most recently from e8cf86e to cafa9e0 Compare September 9, 2021 14:24

cexbrayat force-pushed the chore/jest-27 branch from cafa9e0 to d37135d Compare September 9, 2021 14:26

chore: add postcss 8 resolution

955e08f

lmiller1990 mentioned this pull request Sep 10, 2021

TypeError: Jest: a transform must export a process function. kulshekhar/ts-jest#2675

Closed

sodatea reviewed Sep 10, 2021

View reviewed changes

fix: remove unit-jest badly placed Vue 3 tests

3b4ff7e

cexbrayat marked this pull request as ready for review September 10, 2021 16:50

sodatea approved these changes Sep 15, 2021

View reviewed changes

sodatea added PR: Breaking Change PR: New Feature labels Sep 15, 2021

sodatea merged commit 3d27f42 into vuejs:dev Sep 15, 2021

cexbrayat mentioned this pull request Sep 23, 2021

Plan for Vue CLI v5 #6064

Closed

18 tasks

cexbrayat mentioned this pull request Oct 27, 2021

migrating towards v5.0.0 of the @vue/cli-plugin-unit-jest is incomplete for vue2 applications #6782

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: update jest to v27 #6627

feat: update jest to v27 #6627

cexbrayat commented Aug 8, 2021

cexbrayat left a comment

cexbrayat Aug 8, 2021

lmiller1990 Sep 6, 2021

cexbrayat Sep 6, 2021

sodatea Sep 6, 2021

lmiller1990 Sep 7, 2021

lmiller1990 Sep 9, 2021 •

edited

cexbrayat Aug 8, 2021

merceyz Aug 9, 2021

cexbrayat Aug 8, 2021

cexbrayat commented Aug 30, 2021

sodatea commented Aug 30, 2021

cexbrayat commented Sep 9, 2021

sodatea commented Sep 10, 2021

cexbrayat commented Sep 10, 2021

sodatea Sep 10, 2021

cexbrayat Sep 10, 2021

sodatea Sep 10, 2021

cexbrayat Sep 10, 2021

		@@ -1,4 +1,4 @@
		const babelJest = require('babel-jest')
		const babelJest = require('babel-jest').default

feat: update jest to v27 #6627

feat: update jest to v27 #6627

Conversation

cexbrayat commented Aug 8, 2021

cexbrayat left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 Sep 9, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cexbrayat commented Aug 30, 2021

sodatea commented Aug 30, 2021

cexbrayat commented Sep 9, 2021

sodatea commented Sep 10, 2021

cexbrayat commented Sep 10, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 Sep 9, 2021 •

edited