fix: remove 'new' badge from Create from Component, fix parsing

cli/CHANGELOG.md

@@ -24,6 +24,10 @@ _Released 07/15/2025 (PENDING)_
 - Selectors accepted in the `selectorPriority` of the `SelectorPlayground` (renamed to `ElementSelector`) API have been expanded to accept `name` and `attributes:*`. Additionally, the default selector priority used by Cypress now includes `name`. Addresses [#31801](https://github.com/cypress-io/cypress/issues/30309) and [#6876](https://github.com/cypress-io/cypress/issues/6876). Addressed in [#31889](https://github.com/cypress-io/cypress/pull/31889).
 - [`tsx`](https://tsx.is/) is now used in all cases to run the Cypress config, replacing [ts-node](https://github.com/TypeStrong/ts-node) for TypeScript and Node for commonjs/ESM. This should allow for more interoperability for users who are using any variant of ES Modules. Addresses [#8090](https://github.com/cypress-io/cypress/issues/8090), [#15724](https://github.com/cypress-io/cypress/issues/15724), [#21805](https://github.com/cypress-io/cypress/issues/21805), [#22273](https://github.com/cypress-io/cypress/issues/22273), [#22747](https://github.com/cypress-io/cypress/issues/22747), [#23141](https://github.com/cypress-io/cypress/issues/23141), [#25958](https://github.com/cypress-io/cypress/issues/25958), [#25959](https://github.com/cypress-io/cypress/issues/25959), [#26606](https://github.com/cypress-io/cypress/issues/26606), [#27359](https://github.com/cypress-io/cypress/issues/27359), [#27450](https://github.com/cypress-io/cypress/issues/27450), [#28442](https://github.com/cypress-io/cypress/issues/28442), [#30318](https://github.com/cypress-io/cypress/issues/30318), [#30718](https://github.com/cypress-io/cypress/issues/30718), [#30907](https://github.com/cypress-io/cypress/issues/30907), [#30915](https://github.com/cypress-io/cypress/issues/30915), [#30925](https://github.com/cypress-io/cypress/issues/30925), [#30954](https://github.com/cypress-io/cypress/issues/30954) and [#31185](https://github.com/cypress-io/cypress/issues/31185).
 
+**Bugfixes:**
+
+- Fixed an issue where Create from Component feature might not be able to parse React components from project files. Fixed in [#31457](https://github.com/cypress-io/cypress/pull/31457).
+
 **Misc:**
 
 - The Cypress Command log has a new design when viewing a list of tests. Addresses [#31677](https://github.com/cypress-io/cypress/issues/31677). Addressed in [#31914](https://github.com/cypress-io/cypress/pull/31914).

packages/app/cypress/e2e/create-from-component.cy.ts

@@ -256,5 +256,31 @@ describe('Create from component card', () => {
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
       }, 'src/specs-folder/App.cy.jsx')
     })
+
+    // This test verifies that the Create from Component functionality works correctly
+    // even when a project has a conflicting babel configuration file.
+    // The babel config in this test project includes TypeScript preset and transform plugins
+    // that interfere with react-docgen parsing without passing `configFile: false` to the babel parser.
+    context('project with conflicting babel config', () => {
+      it('parses components out of a file', () => {
+        cy.scaffoldProject('no-specs-babel-conflict')
+        cy.openProject('no-specs-babel-conflict', ['--component'])
+        cy.startAppServer('component')
+        cy.visitApp()
+        cy.specsPageIsVisible('new-project')
+
+        cy.findAllByTestId('card').eq(0).as('ComponentCard')
+
+        cy.get('@ComponentCard').click()
+
+        // Expand the row
+        cy.findByText('App').should('be.visible').click()
+
+        // Click on 'app' component
+        cy.get('[data-cy="react-component-row"]').should('have.length', 2)
+        cy.get('[data-cy="react-component-row"]').eq(0).should('contain', 'App')
+        cy.get('[data-cy="react-component-row"]').eq(1).should('contain', 'AppWithDefaults')
+      })
+    })
   })
 })

packages/app/src/specs/generators/component/ComponentGeneratorCard.vue

@@ -4,7 +4,6 @@
     :header="t('createSpec.component.importFromComponent.header')"
     :description="t('createSpec.component.importFromComponent.description')"
     :icon="DocumentCodeIcon"
-    :badge-text="t('versions.new')"
   />
 </template>
 

packages/data-context/src/actions/CodegenActions.ts

@@ -33,6 +33,7 @@ export class CodegenActions {
       let result = parseReactComponent(src, {
         resolver: findAllWithLink(exportResolver, reactDocgenResolvers),
         babelOptions: {
+          configFile: false,
           parserOpts: {
             plugins: ['typescript', 'jsx'],
           },

packages/data-context/test/unit/actions/CodegenActions.spec.ts

@@ -134,5 +134,29 @@ describe('CodegenActions', () => {
 
       expect(components).to.have.length(0)
     })
+
+    it('ensure that Babel is instructed to not use a config file', async () => {
+      let capturedOptions = null
+      const mockReactDocgen = {
+        parse: (src, options) => {
+          capturedOptions = options
+
+          return [{ displayName: 'TestComponent' }]
+        },
+        builtinResolvers: {
+          FindExportedDefinitionsResolver: class {
+            resolve () {
+              return []
+            }
+          },
+        },
+      }
+
+      const filePath = path.join(process.cwd(), 'test/unit/actions/project/counter-class.jsx')
+
+      await actions.getReactComponentsFromFile(filePath, mockReactDocgen)
+
+      expect(capturedOptions.babelOptions.configFile).to.equal(false)
+    })
   })
 })

system-tests/.eslintignore

@@ -7,6 +7,7 @@ system-tests/projects/e2e/lib/fail.js
 system-tests/projects/e2e/static/fail.js
 system-tests/projects/ids/cypress/e2e/dom.jsx
 system-tests/projects/no-specs/src/Invalid.jsx
+system-tests/projects/no-specs-babel-conflict/src/Invalid.jsx
 system-tests/projects/todos/tests/_fixtures/bad_js.js
 system-tests/projects/todos/tests/_fixtures/bar.js
 system-tests/projects/todos/tests/_fixtures/foo.js

system-tests/projects/no-specs-babel-conflict/babel.config.js

@@ -0,0 +1,80 @@
+// This config is taken from the cypress-services project.
+// It is used to test that the Create from Component functionality works correctly
+// even when a project has a conflicting babel configuration file.
+// The babel config in this test project includes TypeScript preset and transform plugins
+// that interfere with react-docgen parsing without passing `configFile: false` to the babel parser.
+const merge = require('babel-merge')
+const rootConfig = {
+  plugins: [
+    '@babel/plugin-transform-logical-assignment-operators',
+    '@babel/plugin-transform-export-namespace-from',
+    ['@babel/proposal-class-properties', { loose: true }],
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-optional-chaining',
+    'babel-plugin-add-react-displayname',
+  ],
+  presets: [
+    [
+      '@babel/env',
+      {
+        corejs: {
+          version: 3,
+        },
+        useBuiltIns: 'usage',
+        modules: false,
+        loose: true,
+      },
+    ],
+    '@babel/react',
+    '@babel/typescript',
+  ],
+}
+
+const makeNycConfig = require('../../../makeNycConfig')
+
+const plugins = [
+  'optimize-clsx',
+  '@babel/plugin-transform-export-namespace-from',
+  ['@babel/proposal-decorators', { legacy: true }],
+  '@babel/plugin-proposal-private-methods',
+  [
+    'prismjs',
+    {
+      languages: ['javascript', 'yml', 'diff'],
+      plugins: [
+        'line-numbers',
+        'normalize-whitespace',
+        'diff-highlight',
+        'line-highlight',
+      ],
+      theme: 'default',
+      css: true,
+    },
+  ],
+]
+
+// TODO apply it with babel's env
+// only instrument the frontend code during tests
+// should we insert instrumentation only for the dashboard project?
+if (
+  process.env.SERVER_ENV === 'test' ||
+  (process.env.SERVER_ENV === 'development' && process.env.CI) ||
+  process.env.CYPRESS_CT_COVERAGE ||
+  process.env.FORCE_COVERAGE
+) {
+  plugins.push(['babel-plugin-istanbul', makeNycConfig('dashboard')])
+}
+
+if (process.env.CYPRESS) {
+  plugins.push('@babel/plugin-transform-modules-commonjs')
+}
+
+// ! inject proposal-decorators *before*
+module.exports = merge(
+  {
+    plugins,
+  },
+  rootConfig,
+)

system-tests/projects/no-specs-babel-conflict/cypress.config.ts

@@ -0,0 +1,12 @@
+export default ({
+  component: {
+    experimentalSingleTabRunMode: true,
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
+  },
+  e2e: {
+    supportFile: false,
+  },
+})

system-tests/projects/no-specs-babel-conflict/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

system-tests/projects/no-specs-babel-conflict/cypress/support/component.js

@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from 'cypress/react'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

system-tests/projects/no-specs-babel-conflict/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "no-specs-babel-conflict",
+  "version": "0.0.0-test",
+  "dependencies": {
+    "babel-merge": "3.0.0",
+    "core-js": "^3.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.0",
+    "babel-plugin-add-react-displayname": "^0.0.5",
+    "@babel/plugin-proposal-class-properties": "^7.12.0",
+    "@babel/plugin-proposal-decorators": "^7.12.0",
+    "@babel/plugin-transform-react-jsx": "^7.12.0",
+    "@babel/plugin-transform-runtime": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/preset-react": "^7.12.0",
+    "@babel/preset-typescript": "^7.12.0",
+    "@babel/runtime-corejs3": "^7.12.0"
+  }
+}

system-tests/projects/no-specs-babel-conflict/src/App.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+// Using modern JS features that babel would transform
+const defaultProps = {
+  title: 'Hello World',
+  className: 'spec-gen-component-app',
+}
+
+function App (props = {}) {
+  // Object destructuring and spread - babel would transform this
+  const { title, className, ...restProps } = { ...defaultProps, ...props }
+
+  // Template literals and arrow functions
+  const getMessage = () => `${title} from React`
+
+  return (
+    <div data-cy={className} {...restProps}>
+      {getMessage()}
+    </div>
+  )
+}
+
+// Modern export syntax
+export default App
+
+// Named export that also uses modern syntax
+export const AppWithDefaults = (props) => <App {...defaultProps} {...props} />

system-tests/projects/no-specs-babel-conflict/src/Invalid.jsx

@@ -0,0 +1,4 @@
+import React from 'react'
+
+/*eslint-disable */
+export function MyComponent (({

system-tests/projects/no-specs-babel-conflict/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

system-tests/projects/no-specs-babel-conflict/src/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)

system-tests/projects/no-specs-babel-conflict/webpack.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+        resolve: { extensions: ['.js', '.jsx'] },
+      },
+    ],
+  },
+}