Update ts-jest version and api

[seriouslag]

The typescript object was not defined on the result of the configsFor(config) in our project.

On inspection we found that parsedTsConfig and _parsedTsConfig of the configsFor result had the correct object.

Using:

• ts-jest: 26.1.0
• babel-jest: 26.0.1
• vue-jest: 4.0.0-beta.3

in the jest.config.js we have defined the globals as

gloabls: {
  'ts-jest': {
    babelConfig: true,
    tsConfig: 'tsconfig.jest.json',
  },
  'vue-jest': {
    babelConfig: true,
    tsConfig: 'tsconfig.jest.json',
  },
}

[seriouslag]

#245

[nogic1008]

I want to fix package.json to specify the version of ts-jest

[seriouslag]

I want to fix package.json to specify the version of ts-jest

Updated package.json

[kahirokunn]

Looks good to me ❤️

[lmiller1990]

Sorry for the lag on this review.

Won't this be a breaking change for anyone on the older version of ts-jest and jest? Is there any good way to handle verisoning for vue-jest?

The code itself looks fine.

I think we need to move to match jest versions. But we also need some way to version for both Vue 2 and Vue 3. Does anyone have any ideas?

[kahirokunn]

en

If you are only using ts-jest with getTsJestConfig, then you can use ts- It's easy to create a backward compatible version without using jest.
Or you can remove ts-jest from your dependencies and specify peer dep

const configs = tr.configsFor(config)
return { compilerOptions: (configs.typescript || configs.parsedTsConfig).options }

I think it will work if you write something like.

ja

getTsJestConfig でしかts-jestをつかっていないのなら、ts-jestを使わないで後方互換を保ったのを作るのは容易です.
もしくはts-jestをdependenciesから外してpeer depを指定して

const configs = tr.configsFor(config)
return { compilerOptions: (configs.typescript || configs.parsedTsConfig).options }

のように書けば動くと思います

[lmiller1990]

Good idea. @seriouslag are you able to add this:

const configs = tr.configsFor(config)
return { compilerOptions: (configs.typescript || configs.parsedTsConfig).options }

This will make backwards compat no problem. Once you add this, I can do a release.

[kahirokunn]

I can't wait for this pull request ❤️

[nogic1008]

Notice that ts-jest DOES NOT use SemVer for versioning.
ts-jest@latest (26.1.1) still uses parsedTsConfig property, but future versions might be renamed.

[seriouslag]

Good idea. @seriouslag are you able to add this:

const configs = tr.configsFor(config)
return { compilerOptions: (configs.typescript || configs.parsedTsConfig).options }

This will make backwards compat no problem. Once you add this, I can do a release.

I have made the changes.

[lmiller1990]

Alright I will do a release with this fantastic improvement this weekend. Thanks!

[sparkinnovation]

Can we have this fix merged with v4.0.0-beta3 as well and another release for v4.0.0-beta3?

[lmiller1990]

I will release v4.0.0-beta4 today (or whatever beta version we are up to).

[lmiller1990]

It's out.

https://github.com/vuejs/vue-jest/releases/tag/v4.0.0-beta.4

[ahnpnl]

I think at some points vue-jest should switch to typescript codebase too :)

[lmiller1990]

Yes, I think we should rewrite a significant chunk of this based on typescript and ts-jest. Is this something you would be interested in contributing to? I am definitely keen, but mostly busy with vuejs#vue-test-utils and vuejs#vue-test-utils-next...

The entire codebase is around 1k lines, it would probably be easily to do a fresh start for Vue 3 support. Honestly I think it would take less than a day to have something working, we more or less just wrap @vue/compiler-sfc functions (which are also written in TS).

Anything special to keep in mind when writing a jest transformer?

[ahnpnl]

sure I can help with the rewriting.

IMO, the most special thing to note is if Vue compiler has some AST transformers related to typescript content, vue-jest needs to reuse those AST transformers to achieve the similar output as normal Vue app compilation because ts-jest TypeScript compiler only provides a simple compiler with only a hoisting AST transformer.

Getting the experience with jest-preset-angular, it is necessary that the TypeScript compiler in a jest preset to have the similar behavior as the app compiler. In Angular 9+, the Angular team internally uses TypeScript compiler + custom AST transformers to compile the codes. jest-preset-angular now needs to invoke those AST transformers as well otherwise testing with jest doesn't work like with karma (which is provided by Angular team).

[lmiller1990]

Until now we just called the functions exposed in the compiler-sfc: https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc. This is build on the compiler-core: https://github.com/vuejs/vue-next/tree/master/packages/compiler-core which has all kinds of fun stuff. I believe we can get the AST information there (for example this ast.ts file.

I know very little about compilers and this is currently outside my understanding, but I would really like to learn more about this. Can you share some links (for example how the Angular team did this?)

It sounds like instead of using a vue-jest option in the transformers field in jest.config.js, we should be writing a jest-preset-vue. This sounds great.

I don't fully understand "jest-preset-angular now needs to invoke those AST transformers".

[ahnpnl]

Related to AST transformers, it depends actually. For the case of Angular, to compile HTML and ts, Angular team uses some AST transformers to attach metadata for their compiler and use TypeScript API with those AST transformers. I think the current implementation of vue-jest is fine. The rewriting can just be based on it, unless there are new issues popping up related to compilation then we can check deeper later.

About the compilers, I'm not entirely familiar with the whole Angular compiler. Currently jest-preset-angular is looking into https://github.com/angular/angular-cli/tree/master/packages/ngtools/webpack/src/transformers because these AST transformers are required to give to ts-jest astTransformers config to achieve the similar behaviors like Angular compiler.

The easiest way to start with TypeScript compiler is from TypeScript doc Once you are familiar with these simple examples, you can check more complex things like:

• Angular TypeScript compiler

• ts-jest TypeScript compiler

• More documentation about TypeScript internal https://basarat.gitbook.io/typescript/overview/program

I think I like the name vue-jest for jest.config.js more, it's sorter than jest-preset-vue 😃

[theS1LV3R]

Just wanna quickly chime in from the issue above. yargs-parser < 18.1.2 has a Prototype Pollution vulnerability. This means ts-jest needs to be updated to at least 26.1.1 in order to not depend on the vulnerable version any more

[ahnpnl]

It’s kind of odd that I would expect npm/yarn automatically pulls latest 18 with ts-jest 25. Probably it can be yarn/npm issue too that it should pull the latest 18

[theS1LV3R]

Yeah, possibly. I'd target dependency issues before I targeted yarn tho

[lmiller1990]

Let's update the deps (in another PR/issue).