Good morning, I'm having a problem with my component tests. I created a TEST file just for configuration and the scenario has only:

describe('TEST.cy.tsx', () => {
  it('playground', () => {
    cy.mount(<BillingListPage/>)
    cy.log( 'true' )
  })
})

The project uses React, **Webpack **bundler, and Single-SPA. The idea is to run it in standalone mode, but this is not happening. Initially, the project was running on version 6.0.0, and I am migrating it to version ^12.0.0. When executing the project, the component return this var_ = _non_webpack_require__(... : and in the console: My cypress.config.ts file:

import { defineConfig } from 'cypress';
import webpackConfig from './webpack.config';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig,
    },
    viewportWidth: 1000,
    viewportHeight: 660,
  },
});

Is there any missing configuration to be able to execute the components in standalone mode?

Hi @little-nail-2574, glad you are checking out component testing!.I'm not familiar with Single-SPA (I guess it's this? https://single-spa.js.org/). It certainly seems like it could create some problems with component testing depending on how deeply it is involved with rendering components. Based on the name of the test it looks like you are wanting to test a full page with a component test - this is sometimes valid but if the page depends on something like router state (especially if it needs

window.location

) you might hit some issues. A debugging step might be: what happens if you try to mount your smallest component, something like a button - do you have the exact same error? It seems like you might be able to skip all the Single-SPA stuff in a Cypress component test, and just test things as plain React components - but that's at a glance as I don't know how if that's feasible. Sorry I don't have anything more specific!

Hi @wonderful-match-15836 , I had the same issue trying to render a small component, like a button. single-spa is used to integrate micro frontends, since in the project that I work we import components from other projects and integrate them to create our page. I will try to create a foo component and check if it's possible to render it.

cool. and maybe you can tell me more about standalone mode, what is the local experience when developing in standalone mode - does it provide a development server that shows you a component?

when developing in standalone mode, we can render the hole page without problems, but using the same configuration in cypress, it doesn't work

do you need single-spa at all for testing the components, or is it just there because it's there - would you lose anything if you modify the webpack config before passing it to Cypress to remove anything related to single-spa?

it's not possible to remove the single-spa from the application, but I will try to check if it's possible to remove it to render the components for cypress