miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nicholas Cunningham 2024-03-05 15:17:42 -07:00 committed by GitHub
parent bf1dcdc986
commit 391f3ab8e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 58 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
e2e/next-extensions/src/next-component-tests.test.ts
View File

@ -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(

1
packages/cypress/src/generators/component-configuration/component-configuration.ts
View File

@ -97,6 +97,7 @@ function normalizeOptions(
return {
addPlugin,
...options,
framework: options.framework ?? null,
directory: options.directory ?? 'cypress',
};
}

5
packages/cypress/src/generators/component-configuration/files/__directory__/support/component-index.html
View File

@ -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>

1
packages/cypress/src/generators/component-configuration/schema.d.ts vendored
View File

@ -10,4 +10,5 @@ export interface CypressComponentConfigurationSchema {
* @internal
*/
addExplicitTargets?: boolean;
framework?: 'next';
}

1
packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts
View File

@ -39,6 +39,7 @@ export async function cypressComponentConfigurationInternal(
await baseCyCtConfig(tree, {
project: options.project,
skipFormat: true,
framework: 'next',
jsx: true,
addPlugin: options.addPlugin,
})