fix: cypress component testing - fixes #50283

examples/with-cypress/pages/about.cy.tsx → examples/with-cypress/components/about-component.cy.tsx

@@ -1,15 +1,14 @@
+import AboutComponent from './about-component'
 /* eslint-disable */
 // Disable ESLint to prevent failing linting inside the Next.js repo.
 // If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
 // https://github.com/cypress-io/eslint-plugin-cypress
 
-import About from './about'
-
 // Cypress Component Test
-describe('<AboutPage />', () => {
+describe('<AboutComponent />', () => {
   it('should render and display expected content', () => {
     // Mount the React component for the About page
-    cy.mount(<About />)
+    cy.mount(<AboutComponent />)
 
     // The new page should contain an h1 with "About page"
     cy.get('h1').contains('About Page')

examples/with-cypress/components/about-component.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+import React from 'react'
+import styles from '../styles/Home.module.css'
+
+export default function AboutComponent() {
+  return (
+    <>
+      <h1>About Page</h1>
+      <p className={styles.description}>
+        <Link href="/">&larr; Go Back</Link>
+      </p>
+    </>
+  )
+}

examples/with-cypress/pages/about.tsx

@@ -1,14 +1,11 @@
+import AboutComponent from '../components/about-component'
 import styles from '../styles/Home.module.css'
-import Link from 'next/link'
 
 export default function About() {
   return (
     <div className={styles.container}>
       <main className={styles.main}>
-        <h1>About Page</h1>
-        <p className={styles.description}>
-          <Link href="/">&larr; Go Back</Link>
-        </p>
+        <AboutComponent />
       </main>
     </div>
   )