feat!: add Jest and React testing library

.vscode/settings.json

@@ -1,10 +1,6 @@
 {
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
-  "jest.autoRun": {
-    "watch": false,
-    "onSave": "test-file"
-  },
   "search.exclude": {
     "package-lock.json": true
   },

__tests__/index.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+
+import About from '@/pages/about';
+
+// The easiest solution to mock `next/router`: https://github.com/vercel/next.js/issues/7479
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      basePath: '.',
+    };
+  },
+}));
+
+describe('About page', () => {
+  it('should render the About page', () => {
+    render(<About />);
+
+    const paragraph = screen.getAllByText(/Lorem ipsum/i);
+
+    expect(paragraph.length).toEqual(2);
+  });
+});

jest.config.js

@@ -0,0 +1,19 @@
+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: './',
+});
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    '^@/(.*)$': '<rootDir>/src/$1',
+
+    '^@/public/(.*)$': '<rootDir>/public/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

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