Setup testing w/ jest and enzyme

__tests__/pages/__snapshots__/login.test.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Layout
+  title="SHPE UTD"
+>
+  <div
+    className="container"
+  >
+    <section
+      className="section mt-4"
+    >
+      <div
+        className="columns is-centered is-vcentered"
+      >
+        <div
+          className="column is-half"
+        >
+          <figure
+            className="center-image is-flex is-4 image is-256x256"
+          >
+            <img
+              className="is-rounded"
+              src="/imgs/SHPE_Icon.png"
+            />
+          </figure>
+          <p
+            className="title is-1 is-spaced has-text-centered mt-4"
+          >
+            Login
+          </p>
+          <div
+            className="field"
+          >
+            <Component
+              onClick={[Function]}
+            />
+            <Component
+              className="mt-4"
+              onClick={[Function]}
+            />
+            <Component
+              className="mt-4"
+              onClick={[Function]}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</Layout>
+`;

__tests__/pages/login.test.tsx

@@ -0,0 +1,8 @@
+import { shallow} from 'enzyme';
+import Login from '../../pages/login'
+import toJson from "enzyme-to-json";
+
+it('renders correctly', () => {
+  const wrapper = shallow(<Login />);
+  expect(toJson(wrapper)).toMatchSnapshot();
+});

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', {targets: {node: 'current'}}],
+        '@babel/preset-typescript',
+        'next/babel'
+    ],
+}

config/jest/cssTransform.js

@@ -0,0 +1,8 @@
+module.exports = {
+    process() {
+      return 'module.exports = {};'
+    },
+    getCacheKey() {
+      return 'cssTransform'
+    },
+  }

jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    collectCoverageFrom: [
+      '**/*.{js,jsx,ts,tsx}',
+      '!**/*.d.ts',
+      '!**/node_modules/**',
+    ],
+    setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+    testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+    transform: {
+      '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+      '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+    },
+    transformIgnorePatterns: [
+      '/node_modules/',
+      '^.+\\.module\\.(css|sass|scss)$',
+    ],
+    moduleNameMapper: {
+      '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    },
+    snapshotSerializers: ["enzyme-to-json/serializer"]
+  }

package.json

@@ -5,6 +5,8 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
+    "test": "jest --watch",
+    "test:ci": "jest --ci",
     "type-check": "tsc"
   },
   "dependencies": {
@@ -13,13 +15,22 @@
     "node-sass": "^4.0.0",
     "react": "^16.12.0",
     "react-bulma-components": "^3.4.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-social-login-buttons": "^3.1.0"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.12.7",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.19",
     "@types/node": "^12.12.21",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
-    "typescript": "4.0"
+    "babel-jest": "^26.6.3",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1",
+    "jest": "^26.6.3",
+    "typescript": "^4.0"
   },
   "license": "MIT"
 }

setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });