So I’ve been looking all over for a solution to this issue.
Our project is a React+Typescript project made with React App Rewired first, but migrated to Vite now.
Now, I have been working on getting Jest to work after trying to use Vitest (where I ran into completely different issues). I’ve gotten it pretty far now, but the issue I’m having now is that it’s giving me this error message:

Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'VITE_HOST')

Where VITE_HOST is defined in our .test.env file as follows:

VITE_HOST="http://localhost:3000"

Now, the script I’m running looks as follows:

    "test": "dotenv -e ./src/environments/.env.test jest --testResultsProcessor --detectOpenHandles --bail",

I already tested by doing this if the .env file is even being loaded:

dotenv -e ./src/environments/.env.test node -e
// Followed by:
 console.log(process.env)

Which actually logged all the environment variables correctly.

My jest.config.js is looking like this:

/** @type {import('ts-jest').JestConfigWithTsJest} **/
module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\.m?[tj]sx?$': [
      'ts-jest',
      {
        moduleNameMapper: {
          '\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
          '\.(gif|ttf|eot|svg|png)$': '<rootDir>/__mocks__/fileMock.js',
          '@testing-library/jest-dom/extend-expect':
            '@testing-library/jest-dom',
        },
        transformIgnorePatterns: ['node_modules/(?!variables/.*)'],
        useESM: true,
        babelConfig: true,
        diagnostics: {
          ignoreCodes: [1343],
        },
        astTransformers: {
          before: [
            {
              path: 'node_modules/ts-jest-mock-import-meta',
              options: {
                metaObjectReplacement: { url: 'https://www.url.com' },
              },
            },
          ],
        },
      },
    ],
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  setupFiles: ['dotenv/config'],
  maxWorkers: 1,
  moduleNameMapper: {
    '\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
    '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '@testing-library/jest-dom/extend-expect': '@testing-library/jest-dom',
  },
};

Now, for the way we get the environment variables, we have a function that does the following:

export const getProcessEnv = (key: string): ProcessEnv =>
  new ProcessEnv(key, import.meta.env[key]);

export class ProcessEnv {
  constructor(public name: string, public rawValue: string | undefined) {}

Which is then used in our environment.ts file as follows:

import { getProcessEnv } from '../utils/environmentValidator';

const allowedEnvironmentTypes = [
  'local',
  'staging',
  'production',
  'test',
] as const;

export const ENV = {
  HOST: getProcessEnv('VITE_HOST').asString(''),

After which we use the environment variables from the exported ENV const. However, even just doing import.meta.env.VITE_HOST doesn’t work. It also returns “undefined”, apparently, when it shouldn’t.

Now, I don’t have any more ideas on what exactly to do here. Any help would be appreciated as it’s been quite a while since I’ve started work on this entire thing.