Theo's Typesafe Cult•11mo ago

.env parsing causing cypress failure

I'm adding cypress e2e tests to a project I'm migrating from Angular to create-t3-app and thought I'd try out component tests too. Unfortunately trying to run the component tests results in a failure when parsing the .env vars.

Error: Invalid environment variables
    at onValidationError (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:128:13)
    at g (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:140:12)
    at C (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/env-nextjs/index.ts:28:10)
    at file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/src/env.mjs:4:20
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/next.config.mjs:5:1

Error: Invalid environment variables
    at onValidationError (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:128:13)
    at g (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:140:12)
    at C (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/env-nextjs/index.ts:28:10)
    at file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/src/env.mjs:4:20
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/next.config.mjs:5:1

I've tried using dotenv-cli to make them available but cypress must be running additional commands that are missing them: npx dotenv-cli -e .env npx cypress open Additionally I tried adding the variables to a cypress.env.json but it looks like that is only made available to the test scripts and not the application. Hopefully I'm missing something simple and don't have to hack together a custom dev server script or something like that.

16 Replies

noe 💜•11mo ago

What are the contents of your .env file?

CuriouslyCory•11mo ago

I can't tell if trolling or serious 😅 It's the default create-t3-app .env file with some additional NEXT_PUBLIC && server only variables added. The variables all pass validation when run normally by npm run dev or next dev.

noe 💜•11mo ago

Ok. I would still appreciate seeing the contents of the .env file as that seems to be the root of the issue. I am not in your setup, and while you mention it is the default .env file, you also mention additional variables are added. That's not enough for me to know the full contents.

Rhys•11mo ago

have use used the CYPRESS_ prefix on your env vars? https://docs.cypress.io/guides/guides/environment-variables#Option-3-CYPRESS_

Environment Variables | Cypress Documentation

Difference between OS-level and Cypress environment variables

noe 💜•11mo ago

The issue appears to be with validation working through npm run dev and next dev, but not through a component test. I don't think this is an issue of accessing environment variables, which the CYPRESS_ prefix seems to be a solve for.

Rhys•11mo ago

Cypress is going to strip out any env vars that don’t start with the cypress prefix causing the env validation to fail causing the test to fail So they either need to duplicate the variables or find a way to disable that prefix

noe 💜•11mo ago

Oh wow, I was not aware Cypress did that. Also, why would vaidation fail? Cypress just removes the env vars, right?

Rhys•11mo ago

Yeah so the env vars won’t exist when zod goes to parse it, throwing an error @curiouslycory you can verify the env vars are being stripped by console logging them before validation

noe 💜•11mo ago

Oh, so the validation is looking for specific ENV vars to exist? Sorry, I don't have specifc experience with create-t3-app.

Rhys•11mo ago

Create t3 app has a validation step at build time where it takes your environment variables and parses them, if any of them don’t match your schema then the build fails

noe 💜•11mo ago

Understandable. In that case "Invalid environment variables" feels like a unhelpfully vague error message. Looking through the code, it looks like it's supposed to log out Zod errors, if it's a Zod error. EDIT: Ok, it logs the Zod errors, but throws just the sentence.

noe 💜•11mo ago

https://github.com/t3-oss/t3-env/blob/f3e735420610d10af315e68a974f64d9a40c9bbb/packages/core/index.ts#L179

GitHub

t3-env/packages/core/index.ts at f3e735420610d10af315e68a974f64d9a4...

Contribute to t3-oss/t3-env development by creating an account on GitHub.

CuriouslyCory•11mo ago

I added a console.log to the cypress.config.ts file to see, but can confirm that they are undefined at least at the point that the config file is loaded. This is with and without the cypress.env.json.

Rhys•11mo ago

Anyways @curiouslycory you can use a loadenv package in your cypress config file and then pass them in there as envs probably https://github.com/AnswerOverflow/AnswerOverflow/blob/main/packages/ui/vite.config.ts That’s a reference on how I do it for vite, you may be able to adapt it

GitHub

AnswerOverflow/packages/ui/vite.config.ts at main · AnswerOverflow/...

Indexing Discord Help Channel Questions into Google - AnswerOverflow/AnswerOverflow

CuriouslyCory•11mo ago

Tried adding them directly to the cypress.config.ts file as well under the "env" key and still no dice. I'll try that out @Rhys as reece

taymoor•7mo ago

Has anyone tried stubbing/mocking either the export value from createEnv or createEnv itself in cypress w/ component testing? I have a "ui" component that is only going to be RSC'd because it relies on a env variable only scoped to the server Component testing forces it be browser rendered, so i was thinking stubbing and mocking the env you import in from ~/env could be a solution, however i can't find a good way to cy.stub either createEnv or env

Gaming

Programming

.env parsing causing cypress failure