feat: type check vue files

[lmiller1990]

Not super clean - creates a tmp file (but the OS will normally clear these periodically. Should confirm this isn't going to be a problem).

At the very least a decent POC. Hidden behind an experimentalTs flag. Makes tests run a bit slower on basic observation. Eg

vue-jest: {
  enableExperimentalTsDiagnostics: true
}

[ahnpnl]

I have a generic idea how to cooperate between ts-jest and vue-jest. Let me know the decision your team take regarding to ts-jest or babel-jest. I'm happy to help :)

[ahnpnl]

You can put warning message here, that is how currently ts-jest does with isolatedModules: true

[ahnpnl]

If you use in-memory approach, you won’t need this

[ahnpnl]

ts-jest config always:

• set sourceMap to true. Since you don't need sourceMap here, you can try setting it to false to TypeScript Program won't try to emit source map -> improve performance.

• set noEmit to false. Probably here you can try setting it to true so program.emit() won't try to emit any files. -> improve performance.

When using program.emit(), TypeScript will also try to emit files, which can include compiled js, source map and type declaration.

[ahnpnl]

getPreEmitDiagnostics is usually slow. Probably you can try to use this

[lmiller1990]

@ahnpnl sure, it would be great to use ts-jest. What are you thinking?

If you are interested you can most certainly make a PR targeting this branch. In the meantime, I will make the changes you suggested (sometime in the next day or two, been busy...)

[ahnpnl]

@ahnpnl sure, it would be great to use ts-jest. What are you thinking?

If you are interested you can most certainly make a PR targeting this branch. In the meantime, I will make the changes you suggested (sometime in the next day or two, been busy...)

I will explain my idea first.

Currently I see in frontend world, we have UI libraries/frameworks which follow traditional file extensions like js, jsx, ts, tsx vs UI libraries/frameworks which follow custom file extensions like vue, svelte. Normally ts-jest takes care of transforming and type checking with traditional file extensions only. I want to make a new feature that ts-jest can support transforming and type checking with custom file extensions.

So how it affects to UI libraries/frameworks like Vue, Svelte.. when it comes to Jest transformer and TypeScript support. The idea is SoC concept, in which transformers like vue-jest does what it does best and ts-jest does what it does best:

• vue-jest takes care of transforming all other things rather than what is inside <script>.

• ts-jest takes care of transforming ts to js and also type checking for what is inside <script>.

Proposed implementation

• vue-jest makes a chain of transformers invoking, you can reference ts-jest here

• vue-jest will deliver the content of <script> to ts-jest and let ts-jest handling transforming and type checking.

• After ts-jest finishes, it will return the compile output. Besides it will either throw error for type checking (isolatedModules: false) + cancel tests or show warning for type checking (isolatedModules: true) + tests continue.

• In the case no error, vue-jest can then use the compile output returned by ts-jest to continue the work.

Advantages

• Less maintaining work for vue-jest regarding to TypeScript
• Benefit from TypeScript APIs used by ts-jest

Disadvantages

Relies on ts-jest for TypeScript part. But I don't see any issues on this.

Let me know what you think :)

[lmiller1990]

This is a good idea @ahnpnl. I am going to play around in a new repo: https://github.com/lmiller1990/vue-ts-jest

There is also something new we need to support in Vue jest: https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md#transform-api

Is there a good place I can message you in real time (discord, etc)?

[ahnpnl]

Nice, I like that TransformAPI.

Feel free to ping me on Discord at Ahn#1702

[lmiller1990]

We will continue this work in https://github.com/lmiller1990/vue-ts-jest