Component testing: process.env is always empty within Vue component

Current behavior

This happens only when running Cypress for component testing with cypress run-ct. The process.env of node is never populated within the Vue component. I’ve tried doing all the different options available in the documentation here.

Notice that in the example repository there is an environment variable set in cypress.json for NODE_ENV which is correctly available in the test code when doing cy.log(Cypress.env('NODE_ENV'));

However, in the component Button.vue the console log that exposes process.env on line 25 always produces an output of {}. I think what this means is that the Cypress test environment is being populated with the environment variables I am giving it, but not the environment that the components are running in.

I have also tried overriding the webpack env variables directly within /plugins/index.ts with the following changes:

// Set all of the process.env to the config.env
config.env = process.env;

// Set only NODE_ENV directly
config.env.NODE_ENV = "test";

None of this worked either.

Desired behavior

I think the right solution here would be to have the environment variables that are given to Cypress also be propagated into the process.env of the components as well. If that’s not right, then I would at least like to have a solution where I can provide environment variables to the component.

This is useful for testing cases where we want to override the component behaviour for testing, for example in my application I have a loader that waits one second before displaying content to the user for better UI usability, this is completely useless and slows down testing within a test environment, so I would like to tell the component to wait for one second only if process.env.NODE_ENV is not test.

Test code to reproduce

You can find a reproducible repo here: https://github.com/St1fle/cypress-ct-env Just run with npm run test and run the single case in there, you should see the cy.log mentioned above, as well as a single console log with an empty object in the dev tools. In the example repo, the test is doing a simple check that the component should have disabled classes if the process.env.NODE_ENV is set to `test.

Versions

Cypress version: 7.4.0 Operating System: Windows Browser: Microsoft Edge

[jose-aktiun]

I have the same issue with React. Passing env variables to open-ct is not working to me in any form or way mentioned in the documentation.

[St1fle]

Thanks for spotting that out, I must’ve copied out the value incorrectly when making the example repo sorry about that.

Unfortunately this does not fix the issue I am seeing. I added a few more console logs to the example repo and I am seeing some really strange results. The component looks like this:

Those console logs produce the following output:

So the process.env looks like an empty object, but when accessing process.env.NODE_ENV it is set with the value development, even though my cypress.json looks like this:

{
  "pluginsFile": "src/plugins/index.ts",
  "supportFile": "src/support/index.ts",
  "componentFolder": "src/specs",
  "testFiles": "**/*.spec.{ts,js}",
  "fixturesFolder": "src/fixtures",
  "screenshotsFolder": "src/screenshots",
  "videosFolder": "src/videos",
  "ignoreTestFiles": "**/*.{json}",
  "userAgent": "E2E",
  "video": true,
  "videoUploadOnPasses": false,
  "defaultCommandTimeout": 12000,
  "watchForFileChanges": false,
  "retries": {
    "runMode": 2,
    "openMode": 0
  },
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "configFile": "reporter-config.json"
  },
  "component": {
    "watchForFileChanges": true
  },
  "env": {
    "NODE_ENV": "test"
  }
}

I have also tried uncommenting the lines in plugins/index.ts that set the env variable via the config directly to test and that didn’t seem to work either, the test console logs always outputs development. So it looks like it is being set somewhere, but completely ignoring my attempts at configuring it.

I’ve update the example repo to reflect this.