Add Snapshot for each page on website (#2313)

packages/web/.babelrc

@@ -7,7 +7,8 @@
         "root": ["./"],
         "alias": {
           "src": "./src",
-          "server": "./server"
+          "server": "./server",
+          "pages": "./pages"
         }
       }
     ],

packages/web/__mocks__/ImageStub.ts

@@ -0,0 +1 @@
+export default 'image.png'

packages/web/__mocks__/cross-fetch.ts

@@ -0,0 +1,5 @@
+export default function FetchMock() {
+  return Promise.resolve({
+    json: () => [],
+  })
+}

packages/web/__mocks__/lottie-web.ts

@@ -0,0 +1,9 @@
+export default {
+  loadAnimation: function loadAnimation() {
+    return {
+      destroy: function destroy() {
+        return null
+      },
+    }
+  },
+}

packages/web/__mocks__/next/config.ts

@@ -0,0 +1,6 @@
+export default function getConfig() {
+  return {
+    publicRuntimeConfig: { FLAGS: {} },
+    serverRunTimeConfig: {},
+  }
+}

packages/web/__mocks__/next/router.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+export const SingletonRouter = {}
+
+export function withRouter(Component) {
+  return function Wrapped(props) {
+    return <Component router={{ pathName: '/test/' }} {...props} />
+  }
+}

packages/web/__mocks__/nuka-carousel.tsx

@@ -0,0 +1,3 @@
+export default function MockCarousel({ children }) {
+  return children
+}

packages/web/__mocks__/react-lazyload-fadein.ts

@@ -0,0 +1,7 @@
+export default function MockLazy({ children }) {
+  return children(funct)
+}
+
+function funct() {
+  return null
+}

packages/web/__mocks__/react-modal.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+interface Props {
+  id: string
+  isOpen: boolean
+  contentLabel: string
+  overlayClassName: string
+  className: any
+  parentSelector: any
+  shouldCloseOnOverlayClick(): void
+  onRequestClose(): void
+  onAfterOpen(): void
+}
+
+export default class MockReactModal extends React.Component<Props, any> {
+  static setAppElement() {
+    return null
+  }
+
+  render() {
+    return <div id={this.props.id}>{this.props.isOpen && this.props.children}</div>
+  }
+}

packages/web/jest.config.js

@@ -8,9 +8,12 @@ module.exports = {
       tsConfig: 'tsconfig.jest.json',
     },
   },
+  setupFiles: ['./jestSetup.js', 'jest-canvas-mock'],
   moduleNameMapper: {
+    '\\.(png|jpg|jpeg)$': '<rootDir>/__mocks__/ImageStub.ts',
+    'pages/(.*)$': '<rootDir>/pages/$1',
     'src/(.*)$': '<rootDir>/src/$1',
   },
   preset: 'react-native-web',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
 }

packages/web/jestSetup.js

@@ -0,0 +1,17 @@
+const originalConsoleError = console.error
+
+// proptype warnings make tests impossible to understand
+console.error = (message) => {
+  if (/(Failed prop type)/.test(message)) {
+    return
+  }
+
+  originalConsoleError(message)
+}
+
+// ensure random is predictable
+Math.random = function random() {
+  return 0.5
+}
+
+require('jest-fetch-mock').enableMocks()

packages/web/next.config.js

@@ -1,6 +1,5 @@
 const withSass = require('@zeit/next-sass')
 const withImages = require('next-images')
-const webpack = require('webpack')
 const envConfig = require('./env-config')
 const serverEnvConfig = require('./server-env-config')
 
@@ -26,6 +25,11 @@ module.exports = withImages(
         config.resolve.alias['@sentry/node'] = '@sentry/browser'
       }
 
+      config.module.rules.push({
+        loader: 'ignore-loader',
+        test: /\.test.ts$/,
+      })
+
       return config
     },
   })

packages/web/package.json

@@ -97,9 +97,12 @@
     "babel-plugin-react-native-web": "^0.11.7",
     "cross-env": "^5.1.6",
     "node-sass": "^4.13.0",
+    "jest-canvas-mock": "^2.2.0",
+    "jest-fetch-mock": "^3.0.0",
     "nodemon": "^2.0.2",
     "postcss-scss": "^2.0.0",
     "react-native-svg": "^9.13.6",
+    "ignore-loader": "~0.1.2",
     "webpack": "4.41.2"
   }
 }