cypress: Cypress component tests fail to run when using @cypress/vite-dev-server@2.2.3

Current 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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 22 (9 by maintainers)

Most upvoted 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.env

export const SC_ATTR: string =
  (typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
  'data-styled';

https://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:

// workaround-cypress-10-0-2-process-issue.js
global.process = global.process || {};
global.process.env = global.process.env || {};

// your-component.cy.tsx
import './workaround-cypress-10-0-2-process-issue'
import YourComponentThatUsesStyledComponent from './your-component';

amoshydra on Sep 8, 2022

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!

tomekbuszewski on Sep 7, 2022