Improved fix for #378

Author: kirill-konshin

packages/demo-page/src/pages/pageProps.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {NextPage} from 'next';
+import Link from 'next/link';
+import {State} from '../components/reducer';
+import {wrapper} from '../components/store';
+
+const PropsPage: NextPage<State> = props => {
+    return (
+        <div className="pageProps">
+            <p>Using Next.js default prop in a wrapped component.</p>
+            <pre>{JSON.stringify(props)}</pre>
+            <nav>
+                <Link href="/">
+                    <a>Navigate to index</a>
+                </Link>
+            </nav>
+        </div>
+    );
+};
+
+PropsPage.getInitialProps = wrapper.getInitialPageProps(store => async () => ({
+    prop: 'foo',
+}));
+
+export default PropsPage;

packages/demo-page/tests/index.spec.ts

@@ -26,4 +26,12 @@ describe('Basic integration', () => {
         await expect(page).toMatch('"page": "was set in index page');
         await expect(page).toMatch('"custom": "custom"');
     });
+
+    it('initial page props', async () => {
+        await openPage('/pageProps');
+
+        await page.waitForSelector('div.pageProps');
+
+        await expect(page).toMatch('{"prop":"foo"}');
+    });
 });

packages/demo/src/pages/pageProps.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {NextPage} from 'next';
+import Link from 'next/link';
+import {State} from '../components/reducer';
+import {wrapper} from '../components/store';
+
+const PropsPage: NextPage<State> = props => {
+    return (
+        <div className="pageProps">
+            <p>Using Next.js default prop in a wrapped component.</p>
+            <pre>{JSON.stringify(props)}</pre>
+            <nav>
+                <Link href="/">
+                    <a>Navigate to index</a>
+                </Link>
+            </nav>
+        </div>
+    );
+};
+
+PropsPage.getInitialProps = wrapper.getInitialPageProps(store => async () => ({
+    prop: 'foo',
+}));
+
+export default PropsPage;

packages/demo/tests/index.spec.ts

@@ -59,4 +59,12 @@ describe('Using App wrapper', () => {
         await expect(page).toMatch('"page": "static"'); // redux
         await expect(page).toMatch('"app": "was set in _app"'); // redux
     });
+
+    it('initial page props', async () => {
+        await openPage('/pageProps');
+
+        await page.waitForSelector('div.pageProps');
+
+        await expect(page).toMatch('{"appProp":"/pageProps","prop":"foo"}');
+    });
 });

packages/wrapper/src/index.tsx

@@ -217,6 +217,16 @@ export const createWrapper = <S extends Store>(makeStore: MakeStore<S>, config:
                     delete resultProps.pageProps.initialState;
                 }
 
+                console.log({initialProps, resultProps});
+
+                // unwrap getInitialPageProps
+                if (resultProps?.pageProps?.initialProps) {
+                    resultProps.pageProps = {...resultProps.pageProps, ...resultProps.pageProps.initialProps};
+                    delete resultProps.pageProps.initialProps;
+                }
+
+                console.log({initialProps, resultProps});
+
                 return (
                     <Provider store={this.store}>
                         <Component {...initialProps} {...resultProps} />

packages/wrapper/tests/server.spec.tsx

@@ -134,6 +134,14 @@ describe('withRedux', () => {
                 child(<WrappedApp initialProps={{pageProps: {fromApp: true}}} pageProps={{getStaticProp: true}} />),
             ).toEqual('{"props":{"pageProps":{"fromApp":true,"getStaticProp":true}},"state":{"reduxStatus":"init"}}');
         });
+        test('for page case (new Next versions)', () => {
+            const WrappedPage: any = createWrapper(makeStore).withRedux(DummyComponent);
+            expect(
+                child(<WrappedPage pageProps={{initialProps: {fromPage: true}}} somePropFromNextJs={true} />),
+            ).toEqual(
+                '{"props":{"pageProps":{"fromPage":true},"somePropFromNextJs":true},"state":{"reduxStatus":"init"}}',
+            );
+        });
     });
     test('wrapped component should not have getInitialProps if source component did not have it', () => {
         expect(createWrapper(makeStore).withRedux(DummyComponent).getInitialProps).toBeUndefined();