jest done

Author: WojciechCendrzak

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
+  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'babel-jest',
+  },
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
+  },
+};

package.json

@@ -9,7 +9,8 @@
     "tsc": "tsc --project tsconfig.json --pretty --noEmit",
     "lint": "eslint --ext ts,tsx --fix",
     "pretti": "prettier --config ./.prettierrc.js -w ./src",
-    "postinstall": "husky install"
+    "postinstall": "husky install",
+    "test": "jest"
   },
   "dependencies": {
     "date-fns": "^2.11.1",
@@ -21,19 +22,27 @@
     "remark-html": "^12.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@types/jest": "^26.0.23",
     "@types/node": "^15.6.0",
     "@types/react": "^17.0.6",
+    "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
     "@typescript-eslint/parser": "^4.24.0",
+    "babel-jest": "^26.6.3",
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "jest-watch-typeahead": "^0.6.3",
     "lint-staged": "^11.0.0",
     "prettier": "^2.3.0",
+    "react-test-renderer": "^17.0.2",
     "typescript": "^4.2.4"
   }
 }

src/pages/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HomePage should match the snapshot 1`] = `
+<div
+  className="container"
+>
+  <header
+    className="header"
+  >
+    <div
+      style={
+        Object {
+          "boxSizing": "border-box",
+          "display": "inline-block",
+          "margin": 0,
+          "maxWidth": "100%",
+          "overflow": "hidden",
+          "position": "relative",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "boxSizing": "border-box",
+            "display": "block",
+            "maxWidth": "100%",
+          }
+        }
+      >
+        <img
+          alt=""
+          aria-hidden={true}
+          role="presentation"
+          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjE0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="
+          style={
+            Object {
+              "border": "none",
+              "display": "block",
+              "margin": 0,
+              "maxWidth": "100%",
+              "padding": 0,
+            }
+          }
+        />
+      </div>
+      <img
+        alt="[Your Name]"
+        className="borderCircle"
+        decoding="async"
+        src="/_next/image?url=%2Fimages%2Fprofile.jpg&w=384&q=75"
+        srcSet="/_next/image?url=%2Fimages%2Fprofile.jpg&w=256&q=75 1x, /_next/image?url=%2Fimages%2Fprofile.jpg&w=384&q=75 2x"
+        style={
+          Object {
+            "border": "none",
+            "bottom": 0,
+            "boxSizing": "border-box",
+            "display": "block",
+            "height": 0,
+            "left": 0,
+            "margin": "auto",
+            "maxHeight": "100%",
+            "maxWidth": "100%",
+            "minHeight": "100%",
+            "minWidth": "100%",
+            "objectFit": undefined,
+            "objectPosition": undefined,
+            "padding": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "width": 0,
+          }
+        }
+      />
+    </div>
+    <h1
+      className="heading2Xl"
+    >
+      [Your Name]
+    </h1>
+  </header>
+  <main>
+    <section
+      className="headingMd"
+    >
+      <p>
+        [Your Self Introduction]
+      </p>
+      <p>
+        (This is a sample website - you’ll be building a site like this in
+         
+        <a
+          href="https://nextjs.org/learn"
+        >
+          our Next.js tutorial
+        </a>
+        .)
+      </p>
+    </section>
+    <section
+      className="headingMd padding1px"
+    >
+      <h2
+        className="headingLg"
+      >
+        Blog
+      </h2>
+      <ul
+        className="list"
+      />
+    </section>
+  </main>
+</div>
+`;

src/pages/index.test.tsx

@@ -0,0 +1,9 @@
+import renderer from 'react-test-renderer';
+import HomePage from '.';
+
+describe('HomePage', () => {
+  it('should match the snapshot', () => {
+    const tree = renderer.create(<HomePage allPostsData={[]} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/pages/index.tsx

@@ -12,7 +12,7 @@ interface HomeProps {
   allPostsData: Post[];
 }
 
-export const Home: React.FC<HomeProps> = ({ allPostsData }) => {
+export const HomePage: React.FC<HomeProps> = ({ allPostsData }) => {
   return (
     <Layout home>
       <Head>
@@ -56,4 +56,4 @@ export const getStaticProps: GetStaticProps<HomeProps> = async () => {
   };
 };
 
-export default Home;
+export default HomePage;