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

Question

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

Answer 1

Personally I route all my import.meta.env values through a single file (src/constants.ts or src/constants.js)

// src/constants.(js|ts)...

const {
  MODE: ENVIRONMENT,
} = import.meta.env;

export {
  ENVIRONMENT
};

Then in my jest tests I just mock the constants file:

// example.test.(js|ts)
jest.mock('src/constants', () => ({
  ENVIRONMENT: 'development',
}));

IMHO this is better also because you'll likely want to mock the value anyway.

If you want to mock things at the global level you can do what @FahadJaved talks about in the comments. It would look something like this:

// jest.config.(js|ts)
moduleNameMapper: {
    // other things...
    'src/constants': '<rootDir>/__mocks__/constantsMock.ts',
  },

// __mocks__/constantsMock.ts

export const ENVIRONMENT = 'development';

// or... 

jest.mock('src/constants', () => ({
  ENVIRONMENT: 'development',
}));

Just be sure your imports always use the exact path that gets mocked, src/constants. You may have to configure tsconfig.json to allow always using src/constants in your imports (no relative paths with ../, etc.).

    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "src/*": ["src/*"]
        },
        // ...
    },
    // ...