fixed the tests

Author: clfhhc

jest.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js'],
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$',
+  testPathIgnorePatterns: ['(/__tests__/common/.*)'],
   globals: {
     NODE_ENV: 'test',
   },

src/__tests__/common/mountWithStore.tsx

@@ -0,0 +1,25 @@
+import React, { ReactChild } from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import configureStore, {
+  ModifiedConfigureStoreOptions,
+} from 'utils/redux/configureStore';
+
+const mountWithStore = (children: ReactChild) => ({
+  reducer = {},
+  devTools = false,
+  middleware,
+  preloadedState,
+  enhancers,
+}: ModifiedConfigureStoreOptions = {}) => {
+  const store = configureStore({
+    reducer,
+    devTools,
+    middleware,
+    preloadedState,
+    enhancers,
+  });
+  return mount(<Provider store={store}>{children}</Provider>);
+};
+
+export default mountWithStore;

src/__tests__/pages/index.test.tsx

@@ -1,29 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { ReactChild } from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import { Provider } from 'react-redux';
-import configureStore, {
-  ModifiedConfigureStoreOptions,
-} from 'utils/redux/configureStore';
+import React from 'react';
+import { ReactWrapper } from 'enzyme';
 import IndexPage from 'pages/index';
 import { act } from 'react-dom/test-utils';
-
-const mountWithStore = (children: ReactChild) => ({
-  reducer = {},
-  devTools = false,
-  middleware,
-  preloadedState,
-  enhancers,
-}: ModifiedConfigureStoreOptions = {}) => {
-  const store = configureStore({
-    reducer,
-    devTools,
-    middleware,
-    preloadedState,
-    enhancers,
-  });
-  return mount(<Provider store={store}>{children}</Provider>);
-};
+import mountWithStore from '__tests__/common/mountWithStore';
 
 describe('IndexPage', () => {
   const testProp = {

src/__tests__/pages/index/[id].test.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import Page, { getStaticProps } from 'pages/index/[id]';
+import mountWithStore from '__tests__/common/mountWithStore';
 
 describe('Page', () => {
   const testProp = {
     test: 'test',
   };
+
   let TestPageWrapper: ReactWrapper;
-  beforeAll(() => {
-    act(() => {
+
+  beforeAll(async () => {
+    await act(async () => {
       /* eslint-disable-next-line react/jsx-props-no-spreading */
-      TestPageWrapper = mount(<Page id="testId" {...testProp} />);
+      TestPageWrapper = mountWithStore(<Page id="testId" {...testProp} />)();
     });
-    TestPageWrapper.update();
+    // TestPageWrapper.update();
   });
 
   it('should render without throwing an error', () => {
@@ -32,7 +35,7 @@ describe('Page', () => {
 
   it('should render page process env correctly', () => {
     expect(TestPageWrapper.find('p').at(2).text()).toContain(
-      process.env.TEST_PAGE_VAR
+      process.env.NEXT_PUBLIC_TEST_PAGE_VAR
     );
   });
 });

src/__tests__/pages/index/__snapshots__/[id].test.tsx.snap

@@ -1,20 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Page should render without throwing an error 1`] = `
-<IndexPage
-  id="testId"
-  test="test"
+<Provider
+  store={
+    Object {
+      "addReducer": [Function],
+      "dispatch": [Function],
+      "getState": [Function],
+      "injectReducers": [Function],
+      "reducer": Object {
+        "text": [Function],
+      },
+      "removeReducers": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      "substituteReducers": [Function],
+      Symbol(observable): [Function],
+    }
+  }
 >
-  <div>
-    <p>
-      Param: testId
-    </p>
-    <p>
-      Props from _app.tsx: {"test":"test"}
-    </p>
-    <p>
-      Page Process Env: TEST_TEST_PAGE_PROP
-    </p>
-  </div>
-</IndexPage>
+  <IndexPage
+    id="testId"
+    test="test"
+  >
+    <main>
+      <ManifestHead
+        hrefCanonical="/index/testId"
+        title="github_pwa dynamic-path"
+      >
+        <Head>
+          <Component
+            handleStateChange={null}
+            inAmpMode={false}
+            reduceComponentsToState={[Function]}
+          />
+        </Head>
+      </ManifestHead>
+      <p>
+        Param: testId
+      </p>
+      <p>
+        Props from _app.tsx: {"test":"test"}
+      </p>
+      <p>
+        Page Process Env: TEST_TEST_PAGE_PROP
+      </p>
+      <TextDivWrap>
+        <DynamicStoreWrap
+          callbackOnMount={[Function]}
+          callbackOnUnmount={[Function]}
+        >
+          <DynamicStore
+            callbackOnMount={[Function]}
+            callbackOnUnmount={[Function]}
+            store={
+              Object {
+                "addReducer": [Function],
+                "dispatch": [Function],
+                "getState": [Function],
+                "injectReducers": [Function],
+                "reducer": Object {
+                  "text": [Function],
+                },
+                "removeReducers": [Function],
+                "replaceReducer": [Function],
+                "subscribe": [Function],
+                "substituteReducers": [Function],
+                Symbol(observable): [Function],
+              }
+            }
+          />
+        </DynamicStoreWrap>
+      </TextDivWrap>
+      <PrefixedLink
+        href="/"
+      >
+        <Link
+          as="/"
+          href="/"
+        >
+          <a
+            href="/"
+            onClick={[Function]}
+            onMouseEnter={[Function]}
+          >
+            index
+          </a>
+        </Link>
+      </PrefixedLink>
+    </main>
+  </IndexPage>
+</Provider>
 `;