Add jest

__tests__/components/NavBar.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import NavBar from 'components/NavBar';
+import '@testing-library/jest-dom';
+
+describe('NavBar', () => {
+  it('renders a title', async () => {
+    render(<NavBar />);
+
+    const heading = await screen.findByText(/RUA!/i);
+
+    expect(heading).toBeInTheDocument();
+  });
+  it('renders menu items', async () => {
+    render(<NavBar />);
+
+    const home = await screen.findByText(/Home/i);
+    const blog = await screen.findByText(/Blog/i);
+
+    expect(home).toBeInTheDocument();
+    expect(blog).toBeInTheDocument();
+
+    expect(home.hasAttribute('href')).toBeTruthy();
+    expect(home.getAttribute('href')).toEqual('/');
+    expect(blog.hasAttribute('href')).toBeTruthy();
+    expect(blog.getAttribute('href')).toEqual('/blog');
+  });
+});

jest.config.js

@@ -0,0 +1,19 @@
+// 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 = {
+  // Add more setup options before each test is run
+  // 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);

package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest --watch",
+    "test-ci": "jest --ci --coverage"
   },
   "dependencies": {
     "@mdx-js/loader": "^2.1.0",
@@ -19,11 +21,15 @@
     "react-icons": "^4.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.4",
+    "@types/jest": "^27.4.1",
     "@types/node": "17.0.21",
     "@types/react": "17.0.41",
     "autoprefixer": "^10.4.4",
     "eslint": "8.11.0",
     "eslint-config-next": "12.1.0",
+    "jest": "^27.5.1",
     "postcss": "^8.4.12",
     "tailwindcss": "^3.0.23",
     "typescript": "4.6.2"