Typescript and Jest config

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel", "@babel/preset-typescript"],
+  "plugins": []
+}

README.md

@@ -88,6 +88,14 @@ npm run dev
 npm run build
 ```
 
+## Tests
+
+To run Jest unit tests:
+
+```shell
+npm run test
+```
+
 ## Configuration
 
 Canopy IIIF uses a default configuration `config/.default/canopy.default.json` for demonstration purposes if a custom one is not set. The build process will read from a custom configuration file at `config/canopy.json` if it exists. Please review [configuration documentation](https://canopy-iiif.vercel.app/about) for customization of Canopy IIIF.

canopy.js → canopy.ts

@@ -1,10 +1,7 @@
 require("dotenv").config();
+const buildConfig = require("./src/lib/build/config");
 const aggregate = require("./src/lib/build/aggregate");
-const {
-  getConfig,
-  getOptions,
-  getNavigation,
-} = require("./src/lib/build/config");
+
 const args = process.argv;
 
 (() => {
@@ -13,9 +10,9 @@ const args = process.argv;
     ?.split("=")
     ?.pop();
 
-  const config = getConfig(path);
-  const options = getOptions();
-  const navigation = getNavigation();
+  const config = buildConfig.getConfig(path);
+  const options = buildConfig.getOptions();
+  const navigation = buildConfig.getNavigation();
   const { prod, dev } = config;
 
   config.environment = args.includes("dev") ? dev : prod;
@@ -40,5 +37,3 @@ const args = process.argv;
 
   aggregate.build(env.CANOPY_CONFIG);
 })();
-
-module.exports = { getConfig };

jest.config.next.ts

@@ -0,0 +1,33 @@
+import type { JestConfigWithTsJest } from "ts-jest";
+import nextJest from "next/jest.js";
+
+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
+/** @type {import('jest').Config} */
+const config: JestConfigWithTsJest = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  moduleNameMapper: {
+    // Handle module aliases
+    "^@/(.*)$": "<rootDir>/$1",
+    "^@/components/(.*)$": "<rootDir>/src/components/$1",
+    "^@/context/(.*)$": "<rootDir>/src/context/$1",
+    "^@/hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^@/lib/(.*)$": "<rootDir>/src/lib/$1",
+    "^@/mocks/(.*)$": "<rootDir>/src/mocks/$1",
+    "^@/pages/(.*)$": "<rootDir>/src/pages/$1",
+    "^@/styles/(.*)$": "<rootDir>/src/styles/$1",
+    "^@/types/(.*)$": "<rootDir>/src/types/$1",
+  },
+  preset: "ts-jest",
+  testEnvironment: "jest-environment-jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+// @ts-ignore
+export default createJestConfig(config);

jest.config.ts

@@ -0,0 +1,26 @@
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+
+  moduleNameMapper: {
+    // Handle module aliases
+    "^@/(.*)$": "<rootDir>/$1",
+    "^@components/(.*)$": "<rootDir>/src/components/$1",
+    "^@config/(.*)$": "<rootDir>/config/$1",
+    "^@context/(.*)$": "<rootDir>/src/context/$1",
+    "^@hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^@lib/(.*)$": "<rootDir>/src/lib/$1",
+    "^@mocks/(.*)$": "<rootDir>/src/mocks/$1",
+    "^@pages/(.*)$": "<rootDir>/src/pages/$1",
+    "^@styles/(.*)$": "<rootDir>/src/styles/$1",
+    "^@types/(.*)$": "<rootDir>/src/types/$1",
+
+    // Mock next/font
+    "next/font": "<rootDir>/src/mocks/next-font.ts",
+  },
+  testEnvironment: "jest-environment-jsdom",
+};
+
+export default config;

jest.setup.ts

@@ -0,0 +1,13 @@
+import "@testing-library/jest-dom";
+
+// IntersectionObserver isn't available in test environment
+const mockIntersectionObserver = jest.fn();
+mockIntersectionObserver.mockReturnValue({
+  observe: () => null,
+  unobserve: () => null,
+  disconnect: () => null,
+});
+window.IntersectionObserver = mockIntersectionObserver;
+
+// Mock next/router
+jest.mock("next/router", () => require("next-router-mock"));

mdx-components.tsx

@@ -1,10 +1,10 @@
-import Blockquote from "@/components/Shared/Markdown/Blockquote";
-import Code from "@/components/Shared/Code/Code";
-import { CodeInline } from "@/components/Shared/Code/Code.styled";
-import Heading from "@/components/Shared/Heading/Heading";
+import Blockquote from "@components/Shared/Markdown/Blockquote";
+import Code from "@components/Shared/Code/Code";
+import { CodeInline } from "@components/Shared/Code/Code.styled";
+import Heading from "@components/Shared/Heading/Heading";
 import type { MDXComponents } from "mdx/types";
 import { ReactElement } from "react";
-import { getSlug } from "@/lib/build/slug";
+import { getSlug } from "@lib/build/slug";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {

next.config.js

@@ -7,7 +7,7 @@ const {
   getConfig,
   getOptions,
   getNavigation,
-} = require("./src/lib/build/config");
+} = require("./src/lib/build/config.ts");
 
 const withMDX = require("@next/mdx")({
   extension: /\.mdx?$/,