vue-cli: E2E tests with Cypress do not use .env.test for env variables

It’s still a issue, .env variables are not shared to Cypress.env nor process.env inside e2e tests. Duplicating .env content to cypress.json does not seem to be a good solution IMHO

from the docs of that plugin:

The command automatically starts a server in production mode to run the e2e tests against. If you want to run the tests multiple times without having to restart the server every time, you can start the server with vue-cli-service serve --mode production in one terminal, and then run e2e tests against that server using the --url option.

From https://github.com/vuejs/vue-cli/blob/dev/docs/env.md#modes

Mode is an important concept in Vue CLI projects. By default, there are three modes in a Vue CLI project:

• development is used by vue-cli-service serve
• production is used by vue-cli-service build and vue-cli-service test:e2e
• test is used by vue-cli-service test:unit

So you can either provide a .env.production file, or, if you rather want to use a different mode, do this:

# .env.e2e
NODE_ENV=production
VUE_APP_API_URL=http://localhost:8081

vue-cli-service test:e2e --mode e2e

The important part is to set NODE_ENV to production so the backend config is setup like a production build, while the environment variables can be different.

I don’t get why this issue got closed. @lowski The solution you propose does not work. process.env is simply not modified. @yyx990803 What about the application’s code that does not use Cypress.env()? I spent a few hours yesterday trying to figure out how to alter process.env for Cypress’ tests but nothing seemed to work. While searching for a solution in search engines, I found very few relevant answers like what I was trying to do was very exotic.

@LinusBorg @yyx990803 thanks for your help. I decided to add the variable to cypress.json file and created small test helper that at first line in my test:

// test/e2e/test_helper.js
import "babel-polyfill";

Object.entries(Cypress.env()).forEach(([name, value]) => {
  process.env[name] = value;
});

This basically expose Cypress envs to process.env so I can easily refer it inside my code. If I need to add more specific setup in the future I can throw it here as well.