Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.env files are not loaded #1148

Closed
6 tasks done
meoyawn opened this issue Apr 13, 2022 · 15 comments
Closed
6 tasks done

.env files are not loaded #1148

meoyawn opened this issue Apr 13, 2022 · 15 comments

Comments

@meoyawn
Copy link

meoyawn commented Apr 13, 2022

Describe the bug

There's an envDir section in Vite docs https://vitejs.dev/config/#envdir saying that .env files are loaded from root dir by default.

But neither .env nor .env.test file is loaded in vitest 0.9.3

Reproduction

https://github.com/meoyawn/vitest-env

System Info

System:
  OS: macOS 11.6.2
  CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Memory: 2.65 GB / 16.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 17.9.0 - /usr/local/bin/node
  Yarn: 1.22.18 - /usr/local/bin/yarn
  npm: 8.5.5 - /usr/local/bin/npm
Browsers:
  Brave Browser: 98.1.35.101
  Chrome: 100.0.4896.88
  Firefox: 92.0
  Safari: 15.2
npmPackages:
  vitest: ^0.9.3 => 0.9.3

Used Package Manager

yarn

Validations

@kpturner
Copy link

kpturner commented Apr 14, 2022

I have just this minute hit the exact same issue. I have a Vue 3 application built with Vite and tested with Vitest. I created a .env file to move some of the variables into environment variables. So, using an example in the docs, I change my root vue component to get its title from import.meta.env.VITE_APP_TITLE and it works fine. However, when the tests run, this is completely blank/undefined. Is there something special I need to do with the vitest config? This seems to defeat the premise that vitest will use the same config as vite.

#1149

@sheremet-va
Copy link
Member

@meoyawn reproduction works, if I add VITE_ prefix. This is Vite limitation.

@sheremet-va
Copy link
Member

@kpturner can you give me a reproduction, when it works with Vite, but doesn't work in Vitest?

@meoyawn
Copy link
Author

meoyawn commented Apr 14, 2022

@sheremet-va do I understand correctly that FOO=BAR from .env file is not loaded by design?

@meoyawn
Copy link
Author

meoyawn commented Apr 14, 2022

tried setting envPrefix to "", got:

Error: envPrefix option contains value '', which could lead unexpected exposure of sensitive information.

Really hoped I could use vitest to test my node backend 😞

@sheremet-va
Copy link
Member

sheremet-va commented Apr 14, 2022

@sheremet-va do I understand correctly that FOO=BAR from .env file is not loaded by design?

Yes, Vite exposes only env variables starting with VITE_. Vite also exposes loadEnv function that returns a env object (that you can assign to process.env like Object.assign(procces.env, loadEnv(mode, './', ''))), you can use it and pass an empty prefix.

@meoyawn
Copy link
Author

meoyawn commented Apr 14, 2022

@sheremet-va it works! Thank you so much

@meoyawn meoyawn closed this as completed Apr 14, 2022
@kpturner
Copy link

Not sure why this was closed when I have been asked to provide a repo where it doesn't work in vitest even with environment variables with. "VITE_" prefix? Do you now not want a repo showing this?

@kpturner
Copy link

kpturner commented Apr 14, 2022

@kpturner can you give me a reproduction, when it works with Vite, but doesn't work in Vitest?

@sheremet-va This is the repro repo: https://github.com/kpturner/vitest-github-repro
Do you want me to raise a different ticket? It is already in a discussion here: #1149

@sheremet-va sheremet-va reopened this Apr 15, 2022
@sheremet-va
Copy link
Member

@kpturner can you give me a reproduction, when it works with Vite, but doesn't work in Vitest?

@sheremet-va This is the repro repo: https://github.com/kpturner/vitest-github-repro Do you want me to raise a different ticket? It is already in a discussion here: #1149

Hey, your issue is with this code:

    define: { 'process.env': {} },

This overrides process.env with an empty object while running in Vitest (runs inside Node). Remove this line (maybe use condition, like mode === 'test' or process.env.VITEST) and everything will work.

I will make a patch that removes it inside a Vitest plugin in the future to not case confusion.

@kpturner
Copy link

Excellent - thanks

@meoyawn
Copy link
Author

meoyawn commented Apr 15, 2022

@kpturner sorry closing the issue prematurely was my mistake

@repetitioestmaterstudiorum
Copy link

repetitioestmaterstudiorum commented Jun 19, 2022

If I understand the problem correctly, then vitest already has a solution for this: https://vitest.dev/config/#setupfiles

I simply had to add the line setupFiles: 'dotenv/config', to my vitest.config.ts file (as I already had dotenv installed as dev dependency), and that took care of loading my .env file.

Example repo: https://github.com/repetitioestmaterstudiorum/ts-boiler/blob/master/vitest.config.ts

@DoisKoh
Copy link

DoisKoh commented Aug 16, 2022

Vite has a specific way of loading the .env files (.env.development based on NODE_ENV=development for example). I believe Vitest should do the same (or at least provide the option)?

@sheremet-va
Copy link
Member

Vite has a specific way of loading the .env files (.env.development based on NODE_ENV=development for example). I believe Vitest should do the same (or at least provide the option)?

Vite doesn't populate process.env, because there is no process in browser context. Vitest on the other hand does it. Vite loads .env.<mode>, Vitest also does this. So I am not sure what you are asking for. Beware that Vitest only loads env starting with VITE_. This is Vite's limitation.

@vitest-dev vitest-dev locked as resolved and limited conversation to collaborators Aug 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants