Cypress component tests fail to run when using @cypress/vite-dev-server@2.2.3
See original GitHub issueCurrent behavior
Running Cypress component tests (Cypress 9.6.1) results in the following error message for all the tests: “Cannot read properties of undefined (reading ‘REACT_APP_SC_ATTR’)”
Desired behavior
The cypress component tests should run correctly as they do with @cypress/vite-dev-server@2.2.2
Test code to reproduce
N/A Standard component tests as per Cypress instructions, tests started with “cypress open-ct” Uses cypress-image-snapshot-plugin and vite-dev-server, configured in plugins/index.js with:
module.exports = (on, config) => {
if (config.testingType === 'component') {
const { startDevServer } = require('@cypress/vite-dev-server');
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
on('dev-server:start', (options) => startDevServer({ options }));
addMatchImageSnapshotPlugin(on, config);
}
};
cypress.json content:
{
"component": {
"componentFolder": "src",
"testFiles": "**/*spec.{js,jsx,ts,tsx}",
"viewportHeight": 600,
"viewportWidth": 800
},
"video": false,
"screenshotOnRunFailure": false
}
Cypress Version
9.6.1
Other
@cypress/vite-dev-server@2.2.3 vite 2.9.8 react 17.0.2
Issue Analytics
- State:
- Created a year ago
- Reactions:4
- Comments:10 (2 by maintainers)
Top Results From Across the Web
@cypress/vite-dev-server - npm
Launches Vite Dev Server for Component Testing. Latest version: 5.0.2, last published: 4 days ago. Start using @cypress/vite-dev-server in ...
Read more >Configuration - Cypress Documentation
This guide is for Cypress 10 and the new JavaScript configuration file format. If you are on an older version of Cypress that...
Read more >@cypress/vite-dev-server - npm package | Snyk
Launches Vite Dev Server for Component Testing For more information about how to use this package see README · Ensure you're using the...
Read more >package.json - rouch/Cypress - NotABug.org
Cypress - Fast, easy and reliable testing for anything that runs in a browser.
Read more >cypress/github-action v4.2.0 - npm.io
GitHub Action for running Cypress end-to-end tests. ... name: Cypress run with env uses: cypress-io/github-action@v4 with: env: host=api.dev.local,port=4222.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Testing Cypress@10.0.2.
Facing the same issue: “Cannot read properties of undefined (reading ‘REACT_APP_SC_ATTR’)”
the variable
process
is defined. however it is assigned to an empty object{}
. This behaviour breaks styled-component’s logic below, as it tries to access property inside process.envhttps://github.com/styled-components/styled-components/blob/7aa709ffbb826d0b1daa1b7e54b188c818298e22/packages/styled-components/src/constants.ts#L4-L6
For my local testing, I am going with a temporary workaround to populate the process env field before importing styled-components like this:
E2Es work flawlessly, it’s component testing (which requires actually rendering) broken for me. I’ve mentioned cypress-vite, as it is a dependency and I use Vite as a bundler, so, you know, provided this information as it might be helpful 😉
edit
Adding mentioned lines to
component.ts
does help! I was adding it to the test file, which wasn’t working. Thanks for hinting this, @rstoneIDBS!