How to use process.env variables in browser running by Cypress

Question

In the source code of my application (React based on create-react-app) I'm using env variables like so: process.env.REACT_APP_API_URL which are stored in my .env.* files.

But when I run the same application under the Cypress the process.env object is empty. How can I provide these variables to be used in React application when it's running under Cypress?

I know that I have a possibility to set Cypress env variables but it is not what I want - this is a different scope.

Answer 1

You can use the configuration API and do something like this on your plugins file. Set config.env = process.env which will set your entire node env for Cypress .

// cypress/plugins/index.js
module.exports = (on, config) => {

  // modify env value
  config.env = process.env

  // return config
  return config
}

You can also selectively assign the values that you want with config.env.YOUR_VAR = process.env.YOUR_VAR .

Answer 2

Create cypress.env.json file that contains your environment variables:

{
  "api_url": "http://localhost:8080"
}

Then set process.env in your cypress/support/index.js :

...

before(() => {
  process.env. REACT_APP_API_URL = Cypress.env("api_url");
})

Answer 3

Updated in Cypress version 10.3.0 and above

To the OP question, in order to make process.env variables available in Cypress , you need to use dotenv package.

npm install dotenv

Make sure this line of code sitting on top of your cypress.config.js

require('dotenv').config()

Now you're good to go using process.env, but only under that cypress.config.js file. As mentioned in another answer, you should leverage the Cypress.env() command by passing all process.env properties to Cypress environment variables, so that you can access those variables globally in Cypress

// cypress.config.js
module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      config.env = process.env
      return config
    }
  }
})

Note that in Cypress version 10.0.0 and above, setupNodeEvents was added to replace the deprecated plugins file.

Now you can retrieve those variables by:

Cypress.env("your_proccess_env_property")

Answer 4

For my use case, I was simply able to do the following.

// cypress.config.js
require('dotenv').config();
const { defineConfig } = require('cypress');

module.exports = defineConfig({
    ...,
    env: {
        ...process.env,
    },
});

Hopefully this helps anyone else in the future!

Answer 5

If you want to use the same variables, the same way as react app, while running only Cypress without an app (this is the reason why process.env is empty). You could add this in cypress.config.js

const dotenvOutput = require('dotenv').config()

then access the variables as

module.exports = defineConfig({
e2e: {
    env: {
       api_url: dotenvOutput.parsed.REACT_APP_API_URL,
    },

You also need to make sure that the .env file is available where the cypress is ran.