test: Restructure testing setup.

Mostly following https://github.com/vercel/next.js/tree/6a32d854fcbb8bb513371db0584375c17c219815/examples/with-jest

Preparation for testing of react components and hooks

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .next
 .vscode/.chrome
+coverage/

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

__mocks__/styleMock.js

@@ -0,0 +1,3 @@
+// Mock CSS files.
+
+module.exports = {};

jest.config.js

@@ -1,13 +1,21 @@
 module.exports = {
+    collectCoverageFrom: ["src/**/*.{js,ts,jsx,tsx}", "!**/*.d.ts"],
     moduleDirectories: ["node_modules", "src"],
-    collectCoverageFrom: [
-        "**/*.{js,jsx,ts,tsx}",
-        "!**/*.d.ts",
-        "!**/node_modules/**",
-    ],
-    coverageDirectory: "coverage",
-    testPathIgnorePatterns: ["/node_modules/", "/.next/"],
-    transform: {
-        "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+    moduleNameMapper: {
+        // Handle CSS imports (with CSS modules)
+        // https://jestjs.io/docs/webpack#mocking-css-modules
+        "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+
+        // Handle CSS imports (without CSS modules)
+        "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
+
+        // Handle image imports
+        // https://jestjs.io/docs/webpack#handling-static-assets
+        "^.+\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/__mocks__/fileMock.js",
     },
+    testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
+    transformIgnorePatterns: [
+        "/node_modules/",
+        "^.+\\.module\\.(css|sass|scss)$",
+    ],
 };