How does one make vitest understand import.meta.env ?

[kpturner]

The premise that vitest shares the config of vite is powerful. However I am struggling to make this work where the use of import.meta.env is used. For example, I have a .env file like this (following the docs):

VITE_APP_TITLE=My App

And a Vue component that looks like this:

<template>
  <div>
    <h1>{{ appTitle }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'App',
    data() {
        return {
            appTitle: import.meta.env.VITE_APP_TITLE,
        };
    },
});
</script>

This works perfectly well. However if I write a unit test to verify that the title is correct, the test fails because appTitle is blank.

import { mount } from '@vue/test-utils';

import App from '@/App.vue';

test('Title is correct', async () => {
    const wrapper = mount(App);
    expect(wrapper.html()).toContain('My App');
});

[sheremet-va]

I guess something broke with how Vitest handles env 🤔 I will investigate later when I will have time.

[kpturner]

Here is a repro repo: https://github.com/kpturner/vitest-github-repro

[kpturner]

Answered here: #1148

[juliushuck]

I case someone still has the problem, that env variables from a .env.development file do not get loaded, make sure, that you run vitest with the vitest --mode development flag. Then you can use the variables from .env.development and .env.development.local just fine via import.meta.env.. Also make sure to prefix the env variables you need with VITE_, otherwise they will not get loaded at all.