Add testing

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

__mocks__/fileMock.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/no-anonymous-default-export */
+export default 'test-file-stub';

__mocks__/styleMock.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/no-anonymous-default-export */
+export default {};

__tests__/pages/index.test.tsx

@@ -0,0 +1,16 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import Home from 'pages/index';
+
+describe('Home', () => {
+  it('renders a heading', () => {
+    render(<Home />);
+
+    const heading = screen.getByText(/hello/i);
+
+    expect(heading).toBeInTheDocument();
+  });
+});

jest.config.js

@@ -0,0 +1,18 @@
+// jest.config.js
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

layouts/MainLayout.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const MainLayout: FC = () => {
+  return <></>;
+};
+
+export default MainLayout;

package.json

@@ -5,7 +5,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest --watch",
+    "test:coverage": "CI=true yarn test --env=jsdom --coverage"
   },
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
@@ -16,6 +18,9 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/jest": "^27.4.0",
     "@types/mdx-js__react": "^1.5.5",
     "@types/node": "17.0.8",
     "@types/react": "17.0.38",
@@ -23,6 +28,7 @@
     "classnames": "^2.3.1",
     "eslint": "8.6.0",
     "eslint-config-next": "12.0.8",
+    "jest": "^27.4.7",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.13",
     "typescript": "4.5.4"