Subscribe on changes!

Importing types doesn't work in jest environment

avatar
May 12th 2023

Vue version

3.3.2

Link to minimal reproduction

https://github.com/vojvodics/vue3.3.1-jest-reproduction-example

Steps to reproduce

Clone reproduction repository and run npm run test

What is expected?

Tests should pass

What is actually happening?

Tests are failing with the following error:

    [@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.

System Info

No response

Any additional comments?

A hacky solution is provided in the repo example. It is based on these files: https://github.com/vuejs/core/blob/v3.3.2/packages/vue/compiler-sfc/index.js https://github.com/vuejs/core/blob/v3.3.2/packages/vue/compiler-sfc/register-ts.js

Also related:

*initially it was v3.3.1, but I updated it to v3.3.2 and it is still present

avatar
May 12th 2023

This is something that needs to be fixed in https://github.com/vuejs/vue-jest I believe. /cc @lmiller1990

It seems TypeScript does not populate ts.sys when loaded in Jest - I'm not sure if passing the Jest-mocked fs into compileScript would resolve this.

avatar
May 14th 2023

I recently ran into the same issue, although I'm not using jest. Will put up a simple repro and link here Discussion on discord

avatar
May 15th 2023

I have the same problem with version 3.2.2 and without jest. Any news?

avatar
May 15th 2023

I have the same problem with version 3.2.2 and without jest. Any news?

I think this feature is available only from v3.3.x See here

avatar
May 16th 2023

I have the same problem with version 3.2.2 and without jest. Any news?

I think this feature is available only from v3.3.x See here

My mistake, i'm using version 3.3.1

avatar
May 19th 2023

Hi there! Had anyone of you time to investigate? 🙂 Using the new cool vue 3.3 interface features (that is importing interfaces from elsewhere) our jest suite is now broken too 🥲 Would really like to step forward with vue 3.3 🥳.

avatar
May 19th 2023

@jenshoffmann1331 Did you try the hacky solution? You basically point to a different transformer than vue-jest (https://github.com/vojvodics/vue3.3.1-jest-reproduction-example/blob/main/jest.config.js#L6) and in that file you call registerTs before exporting vue-jest (https://github.com/vojvodics/vue3.3.1-jest-reproduction-example/blob/main/vue3JestHack.js)

avatar
May 19th 2023

@vojvodics: Yeah! I tried your hack while you were writing your comment. Works well, thank you!

avatar
Jun 5th 2023

I don't think we've tried vue-jest with Vue 3.3 yet. We should add some tests in that code base and see if there's any bugs or issues.

It sounds like this isn't an issue in Vue core, though - perhaps we should move the issue to vue-jest?

avatar
Oct 23rd 2023

Looks like https://github.com/vuejs/core/commit/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f broke the hack suggested here. To fix it, instead of passing in require('typescript') to registerTS(), you have to pass a function that lazily resolves to require('typescript'):

require("@vue/compiler-sfc").registerTS(() => require("typescript"));
module.exports = require("@vue/vue3-jest");