TTC
Theo's Typesafe Cult•16mo ago
CuriouslyCory

.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 💜
noe 💜•16mo ago
What are the contents of your .env file?
CuriouslyCory
CuriouslyCoryOP•16mo 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 💜
noe 💜•16mo 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
Rhys•16mo 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 💜
noe 💜•16mo 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
Rhys•16mo 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 💜
noe 💜•16mo ago
Oh wow, I was not aware Cypress did that. Also, why would vaidation fail? Cypress just removes the env vars, right?
Rhys
Rhys•16mo 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 💜
noe 💜•16mo 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
Rhys•16mo 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 💜
noe 💜•16mo 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 💜
noe 💜•16mo ago
CuriouslyCory
CuriouslyCoryOP•16mo 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
Rhys•16mo 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
CuriouslyCoryOP•16mo 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
taymoor•12mo 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
Want results from more Discord servers?
Add your server