javascript - Mocking .env variables with Vitest - Stack Overflow

admin管理员组

文章数量:1352031

I want to mock env variables with Vitest. For now, I was able to do it this way:

// test
beforeAll(() => {
  import.meta.env.HASHNODE_URL = '';
});

// tested function using an env variable
export const getCanonicalUrl = (slug: string): string => {
  return `${process.env.HASHNODE_URL}/${slug}`;
};

However, this a bit cumbersome as I would need to do this in every test suite for the same env variables.

I also tried using setup files this way but it didn't work:

// vitest.config.ts
/// <reference types="vitest" />

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./test/env-mock.ts'],
  },
});
 
// test/env-mock.ts
beforeAll(() => {
  import.meta.env.HASHNODE_URL = '';
});

afterAll(() => {
  delete import.meta.env.HASHNODE_URL;
});

And could not get this to work with globalSetup either:

// In same vitest.config.ts
globalSetup: './test/global-setup.ts',

// test/global-setup.ts
export function setup(): void {
  import.meta.env.HASHNODE_URL = '';
}

export function teardown(): void {}

Any ideas? This is with Typescript Node.js project, Vitest 0.33.0.

I want to mock env variables with Vitest. For now, I was able to do it this way:

// test
beforeAll(() => {
  import.meta.env.HASHNODE_URL = 'https://blog.IgorKrpenja.';
});

// tested function using an env variable
export const getCanonicalUrl = (slug: string): string => {
  return `${process.env.HASHNODE_URL}/${slug}`;
};

However, this a bit cumbersome as I would need to do this in every test suite for the same env variables.

I also tried using setup files this way but it didn't work:

// vitest.config.ts
/// <reference types="vitest" />

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./test/env-mock.ts'],
  },
});
 
// test/env-mock.ts
beforeAll(() => {
  import.meta.env.HASHNODE_URL = 'https://blog.IgorKrpenja.';
});

afterAll(() => {
  delete import.meta.env.HASHNODE_URL;
});

And could not get this to work with globalSetup either:

// In same vitest.config.ts
globalSetup: './test/global-setup.ts',

// test/global-setup.ts
export function setup(): void {
  import.meta.env.HASHNODE_URL = 'https://blog.IgorKrpenja.';
}

export function teardown(): void {}

Any ideas? This is with Typescript Node.js project, Vitest 0.33.0.

• javascript
• typescript
• testing
• mocking
• vitest

Share Improve this question Follow asked Jul 26, 2023 at 4:51 IgorIgor 1,21133 gold badges1616 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Looks like you should use vi.stubEnv instead.

vi.stubEnv Type: (name: string, value: string) => Vitest Changes the value of environmental variable on process.env and import.meta.env. You can restore its value by calling vi.unstubAllEnvs.

So use this:

import { vi } from 'vitest'

beforeAll(() => {
  vi.stubEnv('HASHNODE_URL', 'https://blog.IgorKrpenja.')
});

afterAll(() => {
  vi.unstubAllEnvs();
});

In the vitest config file vitest.config.ts, you can add a define object inside defineConfig like so:

define: {
  'import.meta.env.ENV_VARIABLE': JSON.stringify(process.env.ENV_VARIABLE)
}

This way, you don't have to define the variable in every test file.

https://vitejs.dev/config/shared-options.html#envprefix

It was a mistake in configuration. My vitest.config.ts was inside src folder. Fixed by moving the file to repo root.

本文标签： javascriptMocking env variables with VitestStack Overflow