Basic testing setup

.gitattributes

@@ -0,0 +1 @@
+*.config.js linguist-detectable=false

__tests__/Error.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from "@testing-library/react";
+import Error from "next/error";
+
+it("renders a not found message on 404 code", () => {
+    render(<Error statusCode={404} />);
+    expect(screen.getByText(/this page could not be found/i)).toBeVisible();
+});
+
+it("renders the correct status code", () => {
+    const code = Math.floor(Math.random() * 500) + 100;
+    render(<Error statusCode={code} />);
+    expect(screen.getByText(code)).toBeVisible();
+});

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    transform: {
+        '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
+    },
+    transformIgnorePatterns: [
+        '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+        '^.+\\.module\\.(css|sass|scss)$',
+    ],
+    testMatch: [
+        '<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}',
+        '<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    ],
+    setupFilesAfterEnv: [
+        "<rootDir>/setupTests.ts"
+    ],
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx"]
+}

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "debug": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest"
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.5",
@@ -15,6 +16,10 @@
     "react-dom": "17.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^26.0.20",
     "@types/node": "^14.14.33",
     "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
@@ -24,14 +29,21 @@
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.0.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-testing-library": "^3.9.0",
+    "jest": "^26.6.3",
     "typescript": "^4.2.3"
   },
   "eslintConfig": {
     "extends": [
-      "react-app"
+      "react-app",
+      "react-app/jest"
     ]
+  },
+  "babel": {
+    "presets": ["next/babel"]
   }
 }

setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';