Testing configuration

.eslintrc.json

@@ -26,5 +26,19 @@
     "@typescript-eslint/no-unsafe-assignment": 0,
     "@typescript-eslint/restrict-template-expressions": 0,
     "@typescript-eslint/no-empty-function": 0
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": [
+        [
+          "@components",
+          "./components"
+        ],
+        [
+          "@classes",
+          "./classes"
+        ]
+      ]
+    }
   }
 }

components/speaker-section/__tests__/speaker-section.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { Speaker } from '@lib/types';
+import SpeakerSection from '@components/speaker-section/speaker-section';
+
+const defaultSpeaker: Speaker = {
+  name: 'SpeakerName',
+  image: {
+    url: 'url'
+  },
+  title: 'Speaker Job Title',
+  company: 'Speaker company',
+  bio: 'Speaker bio'
+} as any;
+
+const renderSpeakerSection = (speaker = defaultSpeaker) => {
+  render(<SpeakerSection speaker={speaker} />);
+
+  return {
+    name: screen.getByText('SpeakerName'),
+    twitterIcon: screen.queryByLabelText('Twitter')
+  };
+};
+
+describe('SpeakerSection', () => {
+  it('should have a name', () => {
+    const { name } = renderSpeakerSection();
+
+    expect(name).toBeInTheDocument();
+  });
+
+  it('should have a twitter icon', () => {
+    const speaker: Speaker = {
+      ...defaultSpeaker,
+      twitter: '@speaker'
+    } as any;
+    const { twitterIcon } = renderSpeakerSection(speaker);
+
+    expect(twitterIcon).toBeInTheDocument();
+  });
+});

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"]
+    }
+  }
+}

package.json

@@ -13,7 +13,9 @@
     "dev": "next",
     "start": "next start",
     "build": "next build",
-    "license": "addlicense -l apache -c 'Vercel Inc.' components/**/* lib/**/* pages/**/* styles/**/* *.ts *.js"
+    "license": "addlicense -l apache -c 'Vercel Inc.' components/**/* lib/**/* pages/**/* styles/**/* *.ts *.js",
+    "test": "jest",
+    "test-watch": "npm run test -- --watch"
   },
   "dependencies": {
     "@agility/content-fetch": "1.1.1",
@@ -40,10 +42,13 @@
     "vanilla-tilt": "1.7.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
     "@types/classnames": "2.2.11",
     "@types/cookie": "0.4.0",
     "@types/htmlescape": "1.1.1",
     "@types/ioredis": "4.17.9",
+    "@types/jest": "^27.0.2",
     "@types/ms": "0.7.31",
     "@types/node": "12.19.8",
     "@types/nprogress": "0.2.0",
@@ -56,12 +61,32 @@
     "@typescript-eslint/parser": "4.10.0",
     "eslint": "7.15.0",
     "eslint-config-prettier": "7.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "4.2.0",
+    "jest": "^27.3.0",
+    "jest-css-modules": "^2.1.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-hover-media-feature": "1.0.0",
     "postcss-preset-env": "6.7.0",
     "prettier": "2.2.1",
+    "ts-jest": "^27.0.7",
     "typescript": "4.3.2"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "moduleNameMapper": {
+      "\\.(css|jpg|png|svg)$": "<rootDir>/node_modules/jest-css-modules",
+      "^@components(.*)$": "<rootDir>/components$1"
+    },
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/test-config/jest-setup.ts"
+    ],
+    "globals": {
+      "ts-jest": {
+        "tsconfig": "<rootDir>/test-config/tsconfig.jest.json"
+      }
+    }
   }
 }

pages/speakers/[slug].tsx

@@ -17,7 +17,7 @@
 import { GetStaticProps, GetStaticPaths } from 'next';
 
 import Page from '@components/page';
-import SpeakerSection from '@components/speaker-section';
+import SpeakerSection from '@components/speaker-section/speaker-section';
 import Layout from '@components/layout';
 
 import { getAllSpeakers } from '@lib/cms-api';

test-config/jest-setup.ts

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

test-config/tsconfig.jest.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "baseUrl": "..",
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@components/*": [
+        "components/*"
+      ],
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@styles/*": [
+        "styles/*"
+      ]
+    }
+  },
+  "exclude": [
+    "../node_modules"
+  ],
+  "include": [
+    "../next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "./test-config/jest-setup.ts"
+  ]
+}

tsconfig.json

@@ -21,5 +21,7 @@
     }
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx",
+    "./test-config/jest-setup.ts"
+  ]
 }