Skip to content

Commit 6f4526e

Browse files
ScriptedAlchemyScriptedAlchemy
authored
Fix next13 (#3835)
* update * fix next 13 hydration --------- Co-authored-by: ScriptedAlchemy <[email protected]>
1 parent d54cac8 commit 6f4526e

File tree

4 files changed

+139
-8
lines changed

4 files changed

+139
-8
lines changed

‎nextjs-v13/e2e/checkNextJSv12Apps.cy.ts

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { BaseMethods } from '../../cypress-e2e/common/base';
2+
import { baseSelectors } from '../../cypress-e2e/common/selectors';
3+
import { Constants } from '../../cypress-e2e/fixtures/constants';
4+
const basePage: BaseMethods = new BaseMethods();
5+
6+
const appsData = [
7+
// {
8+
// appName: Constants.elementsText.nextJsSsrApp.checkout,
9+
// host: 3000,
10+
// },
11+
// {
12+
// appName: Constants.commonConstantsData.home,
13+
// host: 3001,
14+
// },
15+
{
16+
appName: Constants.elementsText.nextJsSsrApp.shop,
17+
host: 3002,
18+
},
19+
];
20+
21+
appsData.forEach((property: { appName: string; host: number }) => {
22+
describe(`Check ${property.appName} app functionality and elements`, () => {
23+
beforeEach(() => {
24+
basePage.openLocalhost({
25+
number: property.host,
26+
});
27+
cy.wait(5000);
28+
});
29+
it('Check the items on the Home page and the links to ZEIT and GitHub in the header', () => {
30+
basePage.checkElementWithTextPresence({
31+
selector: baseSelectors.tags.coreElements.list,
32+
text: Constants.commonConstantsData.home,
33+
});
34+
basePage.checkElementWithTextPresence({
35+
selector: baseSelectors.tags.headers.h1,
36+
text: Constants.elementsText.nextJsSsrApp.texts.text3,
37+
});
38+
basePage.checkElementWithTextPresence({
39+
selector: baseSelectors.tags.paragraph,
40+
text: Constants.elementsText.nextJsSsrApp.texts.text4,
41+
});
42+
basePage.checkElementWithTextPresence({
43+
selector: baseSelectors.tags.headers.h1,
44+
text: Constants.elementsText.nextJsSsrApp.messages.welcomeMessage,
45+
});
46+
basePage.checkElementWithTextPresence({
47+
selector: baseSelectors.tags.paragraph,
48+
text: Constants.elementsText.nextJsSsrApp.texts.text5,
49+
});
50+
basePage.checkElementWithTextPresence({
51+
selector: baseSelectors.tags.headers.h3,
52+
text: Constants.elementsText.nextJsSsrApp.tiles.documentation,
53+
});
54+
basePage.checkElementWithTextPresence({
55+
selector: baseSelectors.tags.headers.h3,
56+
text: Constants.elementsText.nextJsSsrApp.tiles.learn,
57+
});
58+
basePage.checkElementWithTextPresence({
59+
selector: baseSelectors.tags.headers.h3,
60+
text: Constants.elementsText.nextJsSsrApp.tiles.examples,
61+
});
62+
basePage.checkElementWithTextPresence({
63+
selector: baseSelectors.tags.coreElements.list,
64+
text: Constants.elementsText.nextJsSsrApp.zeit,
65+
});
66+
basePage.checkElementWithTextPresence({
67+
selector: baseSelectors.tags.coreElements.list,
68+
text: Constants.elementsText.nextJsSsrApp.gitHub,
69+
});
70+
});
71+
it('Verify the Shop page items', () => {
72+
basePage.clickElementWithText({
73+
selector: baseSelectors.tags.coreElements.list,
74+
text: Constants.elementsText.nextJsSsrApp.shop,
75+
wait: 2000,
76+
});
77+
basePage.checkElementWithTextPresence({
78+
selector: baseSelectors.tags.headers.h1,
79+
text: Constants.elementsText.nextJsSsrApp.pages.shopPage,
80+
});
81+
basePage.checkElementWithTextPresence({
82+
selector: baseSelectors.tags.headers.h3,
83+
text: Constants.elementsText.nextJsSsrApp.texts.mainShopText,
84+
});
85+
});
86+
it('Verify the Federated page items', () => {
87+
basePage.clickElementWithText({
88+
selector: baseSelectors.tags.coreElements.list,
89+
text: Constants.elementsText.nextJSv12App.federatedButton.name,
90+
wait: 2000,
91+
});
92+
basePage.checkElementWithTextPresence({
93+
selector: baseSelectors.tags.headers.h1,
94+
text: Constants.elementsText.nextJSv12App.federatedButton.header,
95+
});
96+
});
97+
it('Verify the Checkout page items', () => {
98+
basePage.clickElementWithText({
99+
selector: baseSelectors.tags.coreElements.list,
100+
text: Constants.elementsText.nextJsSsrApp.checkout,
101+
wait: 2000,
102+
});
103+
basePage.checkElementWithTextPresence({
104+
selector: baseSelectors.tags.headers.h1,
105+
text: Constants.elementsText.nextJsSsrApp.pages.checkoutPage,
106+
});
107+
basePage.checkElementWithTextPresence({
108+
selector: baseSelectors.tags.headers.h3,
109+
text: Constants.elementsText.nextJsSsrApp.messages.checkoutMessage,
110+
});
111+
basePage.checkElementQuantity({
112+
selector: baseSelectors.tags.pre,
113+
quantity: 2,
114+
});
115+
});
116+
});
117+
});

‎nextjs-v13/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"start": "concurrently \"npm --prefix checkout run dev\" \"npm --prefix home run dev\" \"npm --prefix shop run dev\"",
1414
"build": "concurrently \"npm --prefix checkout run build\" \"npm --prefix home run build\" \"npm --prefix shop run build\"",
1515
"serve": "concurrently \"npm --prefix checkout run start\" \"npm --prefix home run start\" \"npm --prefix shop run start\"",
16+
"e2e:ci:legacy": "pnpm start & wait-on http-get://localhost:3001/ && wait-on http-get://localhost:3000/ && wait-on http-get://localhost:3002/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
1617
"e2e:ci": "pnpm run build"
1718
},
1819
"dependencies": {

‎nextjs-v13/shared/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ module.exports = {
3838
createFederatedCatchAll() {
3939
const FederatedCatchAll = initialProps => {
4040
const [lazyProps, setProps] = React.useState({});
41+
const [mount, setMount] = React.useState(false);
4142

4243
const {FederatedPage, render404, renderError, needsReload, ...props} = {
4344
...lazyProps,
@@ -53,6 +54,10 @@ module.exports = {
5354
}
5455
}, []);
5556

57+
React.useEffect(() => {
58+
setMount(true)
59+
}, []);
60+
5661
if (render404) {
5762
// TODO: Render 404 page
5863
return React.createElement('h1', {}, '404 Not Found');

‎nextjs-v13/shop/pages/_app.js

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
import { lazy } from 'react';
2-
const Nav = process.browser
3-
? lazy(() => {
4-
const mod = import('home/nav');
5-
return mod;
6-
})
7-
: () => null;
1+
import { Suspense, lazy, useEffect, useState } from 'react';
2+
const Nav = lazy(() => {
3+
if(process.browser) {
4+
const mod = import('home/nav');
5+
return mod;
6+
}
7+
});
88

99
function MyApp({ Component, pageProps }) {
10+
const [isClient, setIsClient] = useState(false);
11+
12+
useEffect(() => {
13+
// Set isClient to true once the component mounts
14+
setIsClient(true);
15+
}, []);
1016
return (
1117
<>
12-
<Nav />
18+
<Suspense fallback={'loading'}>
19+
{isClient && <Nav />}
20+
</Suspense>
1321
<Component {...pageProps} />
1422
</>
1523
);

0 commit comments

Comments
 (0)