Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

E2E tests with Cypress do not use .env.test for env variables

See original GitHub issue

Version

3.0.0-beta.9

Reproduction link

https://github.com/lowski/fakturownia/tree/managing-clients - it’s an app that I use for testing different techniques for Vue.js app but setup is the default one, created by Vue-cli.

Steps to reproduce

Create .env.test file with some env variable, i.e:

VUE_APP_API_URL=http://localhost:8081

Try to reference that variable inside any of your client-side JavaScript files, i.e.:

console.log(process.env.VUE_APP_API_URL)

What is expected?

It is expected to print http://localhost:8081 when tests are run with Cypress

What is actually happening?

It’s printing undefined

I tried to pass --mode test to e2e command like this:

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

But it throws error that HMR is disabled and test does not run.

Issue Analytics

State:
Created 5 years ago
Comments:16 (14 by maintainers)

Top GitHub Comments

8reactions

LinusBorgcommented, May 15, 2018

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.

7reactions

klarkccommented, Jul 5, 2019

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

Top Results From Across the Web

Environment Variables | Cypress Documentation

When your tests are running, you can use the Cypress.env function to access the values of your environment variables. Option #1: configuration file....

How To Inject Environment Variables Into Cypress Tests

Cypress automatically reads all environment variables that start with CYPRESS_ prefix and makes them available in Cypress.env() object. 1 2 3

Environment Variables in Cypress End-to-End Testing

We often need to write end-to-end (e2e) tests to verify processes requesting secured resources, which demand appropriate credentials.

Specify environment variables for Cypress tests - BrowserStack

Any key/value you set in your Cypress configuration file ( cypress.json by default) under the env key will become an environment variable that...

Environment Variables in Cypress - Tools QA

Here, all the key-value pairs defined under the "env" will be considered as environment variables and can be accessed directly in the Cypress...