vue.jsjestjsvitevue-test-utils

Test suite failed to run import.meta.env.VITE_*


After adding the environment variable import.meta.env.VITE_* in my code, the tests with vue-test-utils started to fail, with the error:

Jest suite failed to run
error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', or 'nodenext'.

I have searched for some available fixes but none have worked so far.

EDIT

jest.config.js file:

module.exports = {
  preset: "ts-jest",
  globals: {},
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.vue$": "@vue/vue3-jest",
    "^.+\\js$": "babel-jest"
  },
  moduleFileExtensions: ["vue", "js", "json", "jsx", "ts", "tsx", "node"],
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/tests/unit/__mocks__/fileMock.js",
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

tsconfig.json file:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "tests"],
  "compilerOptions": {
    "module": "esnext",
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

When including module: "esnext", the warning below is displayed and the error remains.

Validation Warning:

Unknown option "module" with value "commonjs" was found. This is probably a typing mistake. Fixing it will remove this message.

Configuration Documentation: https://jestjs.io/docs/configuration


Solution

  • After much research, I was able to solve the case.

    I had to install the vite-plugin-environment and babel-plugin-transform-import-meta libraries and make the following settings:

    babel.config.js

    module.exports = {
      ...
      plugins: ["babel-plugin-transform-import-meta"]
    }
    

    tsonfig.json

    {
      ...
      "compilerOptions": {
        "module": "esnext",
        ...
        "types": [
          "node"
        ]
      },
      ...
    }
    

    vite.config.ts

    ...
    import EnvironmentPlugin from "vite-plugin-environment"
    ...
    export default defineConfig({
      plugins: [..., EnvironmentPlugin("all")],
      ...
    })
    

    Also change the import.meta.env.* to process.env.*