Importing types doesn't work in jest environment

[vojvodics]

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:

• Support imported types in SFC macros #8083
• How to import interface for defineProps #4294

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

[yyx990803]

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.

[franklin-tina]

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

[mrc-bsllt]

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

[franklin-tina]

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

[mrc-bsllt]

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

[jenshoffmann1331]

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

[vojvodics]

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

[jenshoffmann1331]

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

[lmiller1990]

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?

[person1123]

Looks like d2c3d8b 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");

[edison1105]

It looks like vue-jest need to apply this code to register TS

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

[craigcrawfordcts]

Hmm... Adding the following to jest.config.ts seems to change the error:

import type {Config} from 'jest';
import fs from 'fs';

const JestConfig: Config = {
  globals: {
    "vue-jest": {
      compilerOptions: {
        fs: fs
      }
    }
  },
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.vue$": "@vue/vue3-jest",
    '^.+\\.tsx?$': [
      'ts-jest', {
        babelConfig: true,
      }
    ],
  },
}

[@vue/compiler-sfc] Failed to resolve import source "@/stores/article". typescript is required as a peer dep for vue in order to support resolving types from module imports.

This is without the hacky code above... I wonder if there's a way to provide typescript as a peer dep in the same way?