nx e2e my-app-e2e does not populate Cypress env vars OR populate env files from my-app

[keighleymcf]

Current Behavior

When running e2e tests, the app targeted by the test is served but without loading any env variables from .env or .env.local files located within the app directory.

Env vars defined in cypress.env.json are not populated into the tests.

Also, providing cypress env vars in the env option as covered in the docs: https://nx.dev/packages/cypress/executors/cypress does not populate the env vars when running tests in headed OR headless mode. The docs are missing correct type annotations for the format for the env option.

In order to run my tests with env vars, I need to put a copy of .env and/or .env.local file into the /my-app-e2e folder. This is counterintuitive and not covered in documentation. It is an extra manual and error-prone step. It also breaks with patterns of providing env vars to cypress tests: https://docs.cypress.io/guides/guides/environment-variables#Setting

Expected Behavior

The devServerTarget my-app:serve:development that runs as part of the nx e2e my-app-e2e command should serve the app in the exact same way that running the command manually / running nx serve my-app would. It should populate env vars from env files located in the app directory. It should not be required to have a separate copy of the env files in the respective e2e folder.

OR if it intentionally does not work the same way, it should be explicitly covered in the docs that .env files need to be duplicated in both /apps/my-app and /apps/my-app-e2e

AND add correct type annotations for the env option is added to the docs here: https://nx.dev/packages/cypress/executors/cypress

Since nx has fundamentally integrated cypress into their entire system, I find it hard to believe that env var population just doesn't work except for with a workaround that breaks cypress patterns, so I hope I am doing something wrong. But even so, I wish there were docs with better guidance!
The issue seems like it might be similar to this one, which went stale over a year ago without a solution: #3248

Steps to Reproduce

Env vars not populating when my-app is served:

1. Add a .env or .env.local file to root directory of /apps/my-app. Run nx serve my-app. env vars are correctly populated.
2. Run nx e2e my-app-e2e. This serves my-app, but access the app in the browser and env vars from .env and .env.local are not populated

Trying to add cypress env vars through env option:

1. in project.json in my-app-e2e set env option:

"targets": {
    "e2e": {
      "executor": "@nrwl/cypress:cypress",
      "options": {
        "devServerTarget": "my-app:serve:development",
        "env": {
          "YOUR_ENV_VAR": "envvarvalue",
          "CYPRESS_YOUR_ENV_VAR": "envvarvalue",
          "NX_YOUR_ENV_VAR": "envvarvalue",
        }
    ...
   }

2. Run nx e2e my-app-e2e
3. None of the env vars will be populated in either headless or headed mode.

Env vars from cypress.env.json not populated into tests

1. Add cypress.env.json into my-app-e2e root folder OR my-app root folder with env vars
2. Run nx e2e my-app-e2e
3. None of the env vars will be populated in either headless or headed mode.

Environment

dev... Haven't tried populating env vars in our pipelines yet (gitlab-ci), but not looking forward to it...

[barbados-clemens]

I just tried this locally and env vars from a cypress.env.json are loaded into the cypress runner.

cypress.env.json

{
  "TEST_VALUE": "abc"
}

spec using the env var

describe('my-app', () => {
  beforeEach(() => cy.visit('/'));

  it('should have the right env value', () => {
    cy.log(Cypress.env('TEST_VALUE'));
    assert.equal(Cypress.env('TEST_VALUE'), 'abc');
  });
});

only thing I can think of is the cypress.env.json file needs to be right next to the cypress.json file.

[barbados-clemens]

But those defined in the executor options don't seem to be accessible in the test so I will investigate that further, though the cypress.env.json should be a usable workaround for now.

[barbados-clemens]

So when testing I didn't realize that using --env.<some-var> mixed with env executor option didn't merge (expected behavior). so that's why it "wasn't working" for me.

I have this all validated in the the following repo, and you can see working in this CI run.

check out that repo to see how it's working, I'm not sure using a .env file is supported. I'd recommend using the cypress.env.json instead.
.env vars have to be prefixed with CYPRESS_, but env executor option and cyperss.env.json do not need to be prefixed.

going to close for now, reopen if there is something I missed in your original issue that still needs clarification. Thanks!

[asherccohen]

I'm having a weird scenario that could extend this answer.

App has a .env.local in its folder and defines an api_url:

NX_API_URL="192.168.208:31403/api"

Cypress app has a .env file in its folder, and because of the need of a CYPRESS_ prefix, it's defined as such

CYPRESS_NX_API_URL="192.168.208:31403/api

Then, in order to use the two different vars, in my app I'm doing:

window?Cypress.env("NX_API_URL") || process.env.NX_API_URL

This isn't a big deal once you know it, the sad part comes next.

When the cypress is executed and it serves the app, tests run fine, but I'm unable to open a browser and navigate the app running at that instance.

The reason might be due to the executor not running the app just as a normal serve would do.
It populates the env vars like if it was running under cypress, which fails at being able to run independently (I mean that the runtime app doesn't read process.env.NX_API_URL).

I've tried having both env vars entries in both the app folder and cypress folder but it doesn't work.

Any suggestion?

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.