.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.
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
What are the contents of your
.env
file?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
.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.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
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.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
Oh wow, I was not aware Cypress did that. Also, why would vaidation fail? Cypress just removes the env vars, right?
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
Oh, so the validation is looking for specific ENV vars to exist? Sorry, I don't have specifc experience with
create-t3-app
.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
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.
GitHub
t3-env/packages/core/index.ts at f3e735420610d10af315e68a974f64d9a4...
Contribute to t3-oss/t3-env development by creating an account on GitHub.
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.
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
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
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