diff --git a/e2e/next-extensions/src/next-component-tests.test.ts b/e2e/next-extensions/src/next-component-tests.test.ts
index d36326c196..e25a328a8a 100644
--- 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 Hello Server
;
+ }
+ `;
+ });
+ // 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();
+ });
+ });
+ });
+
+ `
+ );
+}
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
index 3dac12bad7..6d4078c297 100644
--- 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/packages/cypress/src/generators/component-configuration/files/__directory__/support/component-index.html b/packages/cypress/src/generators/component-configuration/files/__directory__/support/component-index.html
index c23249f034..5d75dee47d 100644
--- a/packages/cypress/src/generators/component-configuration/files/__directory__/support/component-index.html
+++ b/packages/cypress/src/generators/component-configuration/files/__directory__/support/component-index.html
@@ -5,7 +5,10 @@
<%= project %> Components App
-
+ <% if(framework === 'next') { %>
+
+
+ <% } %>
diff --git a/packages/cypress/src/generators/component-configuration/schema.d.ts b/packages/cypress/src/generators/component-configuration/schema.d.ts
index bd9aef559c..791aabaa7c 100644
--- 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/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts
index 7bfe488db7..4afa393899 100644
--- a/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts
+++ b/packages/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,
})