fix(nextjs): Adding styles to nextjs cypress should not fail. (#22170)

nrwl · Mar 5, 2024 · 391f3ab · 391f3ab
1 parent bf1dcdc
commit 391f3ab
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 1 deletion.
diff --git a/e2e/next-extensions/src/next-component-tests.test.ts b/e2e/next-extensions/src/next-component-tests.test.ts
@@ -90,6 +90,14 @@ describe('NextJs Component Testing', () => {
       );
     }
   });
+
+  it('should test a NextJs server component that uses router', async () => {
+    const lib = uniq('next-lib');
+    createLibWithCtCypress(lib);
+    if (runE2ETests()) {
+      expect(runCLI(`component-test ${lib}`)).toContain('All specs passed!');
+    }
+  }, 600_000);
 });
 
 function addBabelSupport(path: string) {
@@ -203,6 +211,49 @@ export default Button;
     `generate @nx/next:cypress-component-configuration --project=${libName} --generate-tests --no-interactive`
   );
 }
+
+function createLibWithCtCypress(libName: string) {
+  runCLI(
+    `generate @nx/next:lib ${libName} --no-interactive --projectNameAndRootFormat=as-provided`
+  );
+
+  runCLI(
+    `generate @nx/next:cypress-component-configuration --project=${libName} --no-interactive`
+  );
+
+  updateFile(`${libName}/src/lib/hello-server.tsx`, () => {
+    return `import { useRouter } from 'next/router';
+
+    export function HelloServer() {
+      useRouter();
+    
+      return <h1>Hello Server</h1>;
+    }
+    `;
+  });
+  // Add cypress component test
+  createFile(
+    `${libName}/src/lib/hello-server.cy.tsx`,
+    `import * as Router from 'next/router';
+    import { HelloServer } from './hello-server';
+    
+    describe('HelloServer', () => {
+      context('stubbing out \`useRouter\` hook', () => {
+        let router;
+        beforeEach(() => {
+          router = cy.stub();
+      
+          cy.stub(Router, 'useRouter').returns(router);
+        });
+      it('should work', () => {
+        cy.mount(<HelloServer />);
+      });
+      });
+    });
+    
+    `
+  );
+}
 function addTailwindToLib(libName: string) {
   createFile(`libs/${libName}/src/lib/styles.css`, ``);
   runCLI(

diff --git a/packages/cypress/src/generators/component-configuration/component-configuration.ts b/packages/cypress/src/generators/component-configuration/component-configuration.ts
@@ -97,6 +97,7 @@ function normalizeOptions(
   return {
     addPlugin,
     ...options,
+    framework: options.framework ?? null,
     directory: options.directory ?? 'cypress',
   };
 }

diff --git a/...s/src/generators/component-configuration/files/__directory__/support/component-index.html b/...s/src/generators/component-configuration/files/__directory__/support/component-index.html
@@ -5,7 +5,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title><%= project %> Components App</title>
-
+  <% if(framework === 'next') { %>
+  <!-- Used by Next.js to inject CSS. -->
+  <div id="__next_css__DO_NOT_USE__"></div>
+  <% } %>
 </head>
 <body>
   <div data-cy-root></div>

diff --git a/packages/cypress/src/generators/component-configuration/schema.d.ts b/packages/cypress/src/generators/component-configuration/schema.d.ts
@@ -10,4 +10,5 @@ export interface CypressComponentConfigurationSchema {
    * @internal
    */
   addExplicitTargets?: boolean;
+  framework?: 'next';
 }
diff --git a/...es/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/...es/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts
@@ -39,6 +39,7 @@ export async function cypressComponentConfigurationInternal(
     await baseCyCtConfig(tree, {
       project: options.project,
       skipFormat: true,
+      framework: 'next',
       jsx: true,
       addPlugin: options.addPlugin,
     })