-
Notifications
You must be signed in to change notification settings - Fork 156
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: support jest v27 in vue3-jest #343
Conversation
Hi, kulshekhar/ts-jest#2628 was merged And ts-jest 27 was released 👍 |
c0c7226
to
fdf77e2
Compare
ts-jest v27.0.1 was released including the fix, the PR is now green. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see we have some breaking changes (did not go over Jest 27 release notes yet).
I wonder if we can just do something simple like:
const jestVersion = require('jest/package.json').version
if (jestVersion.includes('26')) {
// v26 specific things
}
Versioning for vue-jest has been a problem for a while. We have several moving targets - Vue 2/3, and Jest 26/27. It's not entirely clear on the best way to do this. What do you think?
lib/transformers/typescript.js
Outdated
@@ -1,5 +1,5 @@ | |||
const ensureRequire = require('../ensure-require') | |||
const babelJest = require('babel-jest') | |||
const babelJest = require('babel-jest').default |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Has jest changed how it processes modules with default exports? I guess this is the breaking change?
lib/utils.js
Outdated
@@ -49,7 +49,11 @@ const transformContent = function transformContent( | |||
|
|||
const getVueJestConfig = function getVueJestConfig(jestConfig) { | |||
return ( | |||
(jestConfig && jestConfig.globals && jestConfig.globals['vue-jest']) || {} | |||
(jestConfig && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right, this will also be a breaking change.
vue-jest@v5 (for Vue 3, Jest 24~26) is still in alpha, so we can include breaking changes even if following semver. How about separating |
I think a clean way would be to do the same than ts-jest and babel-jest for the versioning: use the jest version as the major one. That would mean releasing vue-jest v27, compatible with jest v27. If jest 27 support for Vue 2 is important, maybe having another package could avoid the confusion (vue2-jest v27 and vue3-jest v27). This is definitely a big change but the current versioning is confusing as it is, and I guess more and more projects starting now will bet on Vue 3 and Jest 27. As a developer, it would be clear that using vue-jest v27 (or vue3-jest v27) is what you need. |
I like the idea to match the Jest versioning. The problem historically was how to we handle Vue 2? And eventually, Vue 4? A separate package would likely be the easiest solution. In fact, two separate packages, even? Should we deprecate
etc. This would future proof us. Probably a good opportunity to introduce semantic release, too. Currently I do releases manually, which is not very scalable. What do you guys think? I really like this idea - it's a bit of work to set everything up, and will require pretty good communication, but it definitely solves a lot of problems. |
That's one package for each jest major? Or rather |
I think it makes sense for
|
@wolfgangwalther it's not necessarily per major, it can be minor (or) patch. Take a look at ts-jest. They basically just do a release when it makes sense, but generally try to be up to date where possible and practical. @yyx990803 this seems like a pretty reasonable approach. If (when) we have Vue 4, we can create In this case, we can start preparing this now, and make
Anyone want to work on this? If not, happy to pick it up, but I won't be able to until around the middle of this month (so, 2 weeks-ish from this post). We'll need
|
Thanks for your work @cexbrayat! ❤️ |
Is it difficult to make this repository to monorepo?
|
@nogic1008 that's probably a good idea. Then we can manage everything here and share code. I have not set up a monorepo before - is this something you have experience with and would be interested in doing? |
@lmiller1990 OK. |
@nogic1008, ok thanks! You should have access to push branches here too; you could just make a branch in this repo if you like. If you don't have push access, let me know, we will get it set up. We should do the same for @cexbrayat, since you guys are contributing a lot. |
I like the idea to have version like Where the default So I'm actually more enclined to have both Where the first one is a mirror of the latest vue, and if that's too much to maintain or bad to have npm mirrors for whatever reason then I'd be more inclined for only: And deprecate So that we don't need to change library name if we use |
The previous logic was trying to figure out if CommonJS modules were used in the TS config and if not, and if no babel configuration provided, then loaded a babel transformer to change the module format. This changes the logic to use a more straightforward method by directly updating the tsconfig to commonjs, which should hopefully have the same results without side-effects.
Update: this should now work properly for pure TS projects. I opened another PR #366 to reflect the most common use-case for TS users that have no babel config (and this one is now on top of this extra test to make sure everything works). It would be awesome to have an alpha.2 release if that looks good @lmiller1990 |
Hi all together, I've tried today to bring my current project to jest 27, but I got this error if I run the tests:
My setup: package.json: {
...,
"dependencies": {
"vue": "^3.0.0",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0",
"vuex-oidc": "^3.10.2",
...
},
"devDependencies": {
"@types/jest": "^26.0.24",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~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": "^7.0.0",
"@vue/test-utils": "^2.0.0-rc.10",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"jest": "^27.0.6",
"jest-junit-reporter": "^1.1.0",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"ts-jest": "^27.0.3",
"typescript": "~4.1.5",
"vue3-jest": "^27.0.0-alpha.1"
}
} jest.config.js: module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
transform: {
'^.+\\.vue$': 'vue3-jest',
},
collectCoverageFrom: ['<rootDir>/src/**/*.{ts,vue,js}'],
coverageDirectory: '<rootDir>/test-coverage',
coverageReporters: ['text', 'cobertura'],
testMatch: ['<rootDir>/src/**/*.spec.ts'],
modulePaths: ['<rootDir>'],
testResultsProcessor: './node_modules/jest-junit-reporter',
} A quick google search brought me to this issue in the ts-jest project: kulshekhar/ts-jest#2612. Does anyone have a clue what is going wrong? |
Hi @florianrusch "resolutions": {
"jest": "27.0.6"
} Run Then you need to update your jest config, as the CLI preset will not work (it uses transform: {
'^.+\\.vue$': 'vue3-jest',
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
testEnvironment: 'jsdom', to mimic what the preset does. Then I'm interested to hear if vue3-jest works for you. WHen we're confident enough, I'll open a PR on the CLI to avoid all this manual work 😉 |
Thanks @cexbrayat for you reply. I directly tested it. The following makes the error disappear: transform: {
'^.+\\.vue$': 'vue3-jest',
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest'
}, But after I applied it (also tested with the other changes), I've got a new error: $ npx jest --coverage
Test environment found at "/Users/fr/Workspace/ZF/web-app/node_modules/jest-environment-jsdom-fifteen/lib/index.js" does not export a "getVmContext" method, which is mandatory from Jest 27. This method is a replacement for "runScript".
Test environment found at "/Users/fr/Workspace/ZF/web-app/node_modules/jest-environment-jsdom-fifteen/lib/index.js" does not export a "getVmContext" method, which is mandatory from Jest 27. This method is a replacement for "runScript".
...
FAIL src/components/Header.spec.ts
● Test suite failed to run
Jest worker encountered 4 child process exceptions, exceeding retry limit
at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21) The first message seams to appear repeated for all tests. |
Try to add
to the jest config maybe? |
Awesome 🙂 It works! Thank you very much for your help! To wrap up, I had to add the following lines into my jest config: transform: {
'^.+\\.vue$': 'vue3-jest',
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest',
},
testEnvironment: 'jsdom', |
You can try it with |
Getting errors after update to vue3-jest@27.0.0-alpha.2
Versions in my package.json:
Jest.config.js:
|
Interesting. Is it still in error after If so, it would be great if you can share a small repro in a github repo so we could investigate. |
I think the flag might be |
I searched "jest" in package-lock.json. Found 24.x.x version in vue/cli-plugin-unit-jest dependencies. Manualy changed it to ^27. Then "npm i". Now everything is working. |
Ok, it worked only once. Second "npm i" returns jest 24 and errors. |
@dergunovs Yeah, it's easier to do with Yarn and its resolution feature. If the alpha phase goes smoothly, we'll update the CLI to support vue3-jest, and we'll be able to have jest 27 support without fussing around the dependency resolutions. I'd recommend using Yarn in the meantime if you want to keep using vue3-jest. Thanks for confirming this was not an issue with vue3-jest 👍 |
FYI, I opened a feature request to the CLI team to include vue3-jest and jest 27 by default in a project vuejs/vue-cli#6602 |
Great! I will review your other PRs in the next day or two. You should really have push access to this repo, you could ping Evan (I cannot give you access). |
Updates jest, ts-jest and babel-jest to v27. vue-jest v5 does not support jest v27, so a new vue3-jest package has been introduced (see vuejs/vue-jest#343), with a version number aligned on the jest version (as ts-jest and babel-jest do). This commits replaces vue-jest by vue3-jest, and updates the jest config to use this new trasnformer. This will be the default Vue CLI setup in the future.
Updates jest, ts-jest and babel-jest to v27. vue-jest v5 does not support jest v27, so a new vue3-jest package has been introduced (see vuejs/vue-jest#343), with a version number aligned on the jest version (as ts-jest and babel-jest do). This commits replaces vue-jest by vue3-jest, and updates the jest config to use this new trasnformer. This will be the default Vue CLI setup in the future.
Updates jest, ts-jest and babel-jest to v27. vue-jest v5 does not support jest v27, so a new vue3-jest package has been introduced (see vuejs/vue-jest#343), with a version number aligned on the jest version (as ts-jest and babel-jest do). This commits replaces vue-jest by vue3-jest, and updates the jest config to use this new trasnformer. This will be the default Vue CLI setup in the future.
Updates jest, ts-jest and babel-jest to v27. vue-jest v5 does not support jest v27, so a new vue3-jest package has been introduced (see vuejs/vue-jest#343), with a version number aligned on the jest version (as ts-jest and babel-jest do). This commits replaces vue-jest by vue3-jest, and updates the jest config to use this new trasnformer. This will be the default Vue CLI setup in the future.
* chore: update to jest 27 Updates jest, ts-jest and babel-jest to v27. vue-jest v5 does not support jest v27, so a new vue3-jest package has been introduced (see vuejs/vue-jest#343), with a version number aligned on the jest version (as ts-jest and babel-jest do). This commits replaces vue-jest by vue3-jest, and updates the jest config to use this new trasnformer. This will be the default Vue CLI setup in the future. * chore: document hasOwnProperty Jest workaround
Was this ever resolved? |
No idea, a repo showing the issue would be helpful. |
And also babel-jest and ts-jest v27.
The PR is currently failing because of a change/regression in ts-jest (update: fixed in ts-jest v27.0.1)
TODO: