"Your tests are loading..." stays on screen forever

[kripa644]

When I run cypress open-ct and select error.spec.tsx, cypress is stuck in the "Your tests are loading..." screen. This only happens for component testing and E2E tests are working fine.

Here's my folder structure:

├── cypress
├── src
│   ├── componentTests
|       ├── error.spec.tsx
│   
├── webpack.dev.config.js

and my cypress.json:

{
  "component": {
    "componentFolder": "src/componentTests",
    "testFiles": "**/*spec.{js,jsx,ts,tsx}"
  }
}

and cypress/plugins/index.js:

const webpackConfig = require("../../webpack.dev.config");

module.exports = (on, config) => {
  if (config.testingType === 'component') {

    const { startDevServer } = require('@cypress/webpack-dev-server');

    on('dev-server:start', (options) =>
      startDevServer({ options, webpackConfig })
    );
  }
  return config;
};

and these are the newly added dependencies for component testing:

"@cypress/react": "^5.12.4",
"@cypress/webpack-dev-server": "^1.8.4",

[muratkeremozcan]

This repo might help https://github.com/muratkeremozcan/react-hooks-in-action-with-cypress