Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update jest to v27 #6627

Merged
merged 3 commits into from
Sep 15, 2021
Merged

feat: update jest to v27 #6627

merged 3 commits into from
Sep 15, 2021

Conversation

cexbrayat
Copy link
Member

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

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Docs
  • Underlying tools
  • Other, please describe:

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.

Copy link
Member Author

@cexbrayat cexbrayat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

'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',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@lmiller1990 lmiller1990 Sep 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

babel-jest is now published as an ESM module.

@cexbrayat
Copy link
Member Author

@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?

@haoqunjiang
Copy link
Member

Let's ignore the tests for now.

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

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.

@cexbrayat cexbrayat force-pushed the chore/jest-27 branch 2 times, most recently from e8cf86e to cafa9e0 Compare September 9, 2021 14:24
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
Copy link
Member Author

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 🙏

@haoqunjiang
Copy link
Member

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
Copy link
Member Author

@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...

@@ -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')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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…

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome then, it should be working.

The PR is ready for your review!

@cexbrayat cexbrayat marked this pull request as ready for review September 10, 2021 16:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Jest 27 support
4 participants