chore: fix tests

__mocks__/jest.setup.js

@@ -4,7 +4,7 @@
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
 require("@testing-library/jest-dom/extend-expect");
-require("./__mocks__/modules");
+require("./modules");
 
 global.IntersectionObserver = class IntersectionObserver {
   constructor() {}

__mocks__/modules/next-link.tsx

@@ -1,7 +1,7 @@
-export const onLinkClick = jest.fn();
+export const mockOnLinkClick = jest.fn();
 
 afterEach(() => {
-  onLinkClick.mockReset();
+  mockOnLinkClick.mockReset();
 });
 
 jest.mock("next/link", () => {
@@ -15,7 +15,7 @@ jest.mock("next/link", () => {
         onClick={(e: Event) => {
           e.preventDefault();
           e.stopPropagation();
-          onLinkClick();
+          mockOnLinkClick();
         }}
       >
         {props.children}

jest.config.js

@@ -1,23 +1,50 @@
-const { pathsToModuleNameMapper } = require("ts-jest");
-const { compilerOptions } = require("./tsconfig.json");
-const nextJest = require("next/jest");
 const { resolve } = require("path");
 
-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 = {
+module.exports = {
   testEnvironment: "jsdom",
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ["<rootDir>/__mocks__/jest.setup.js"],
   watchPlugins: [
     "jest-watch-typeahead/filename",
     "jest-watch-typeahead/testname",
   ],
+  transformIgnorePatterns: [
+    "/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
+  collectCoverageFrom: [
+    "**/*.{js,jsx,ts,tsx}",
+    "!**/*.d.ts",
+    "!**/node_modules/**",
+  ],
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    "^.+\\.(js|jsx|ts|tsx)$": [
+      "babel-jest",
+      {
+        presets: ["next/babel"],
+        plugins: ["transform-require-context"],
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    // ...your ignore patterns
+    "node_modules/(?!(unified|bail|is-plain-obj|trough|vfile|unist|hast|remark|mdast|micromark|parse-entities|character-entities|zwitch|longest-streak|retext|unherit|parse|nlcst|rehype|slash|strip-markdown|decode-named-character-reference).*/)",
+  ],
   // moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
   moduleNameMapper: {
+    // NextJS
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+    // Handle module aliases
+    "^@/components/(.*)$": "<rootDir>/components/$1",
+    // UU Files
+    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
+    ".+\\.svg$": `<rootDir>/__mocks__/svg-comp-mock.ts`,
+    ".+\\.(jpg|svg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.ts`,
+    // UU TS
     "^__mocks__/(.*)$": resolve(__dirname, "./__mocks__/$1"),
     "^constants/(.*)$": resolve(__dirname, "./src/constants/$1"),
     "^types/(.*)$": resolve(__dirname, "./src/types/$1"),
@@ -29,14 +56,3 @@ const customJestConfig = {
     "^assets/(.*)": resolve(__dirname, "./src/assets/$1"),
   },
 };
-
-const asyncConfig = createJestConfig(customJestConfig);
-
-module.exports = async () => {
-  const config = await asyncConfig();
-  config.transformIgnorePatterns = [
-    // ...your ignore patterns
-    "node_modules/(?!(unified|bail|is-plain-obj|trough|vfile|unist|hast|remark|mdast|micromark|parse-entities|character-entities|zwitch|longest-streak|retext|unherit|parse|nlcst|rehype|slash|strip-markdown).*/)",
-  ];
-  return config;
-};

package-lock.json

@@ -49,6 +49,8 @@
         "unist-util-flat-filter": "^2.0.0"
       },
       "devDependencies": {
+        "@babel/core": "^7.16.5",
+        "@babel/preset-env": "^7.16.5",
         "@svgr/webpack": "^6.1.1",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
@@ -59,6 +61,8 @@
         "@types/react": "^17.0.6",
         "@types/react-dom": "^17.0.5",
         "@types/webpack-env": "^1.16.3",
+        "babel-jest": "^27.4.5",
+        "babel-plugin-transform-require-context": "^0.1.1",
         "env-cmd": "^10.1.0",
         "esbuild-node-loader": "^0.6.3",
         "eslint": "^7.32.0",
@@ -68,6 +72,7 @@
         "feed": "^4.2.2",
         "hast-util-heading-rank": "^2.1.0",
         "husky": "^7.0.4",
+        "identity-obj-proxy": "^3.0.0",
         "imagemin-gifsicle": "6.0.1",
         "imagemin-mozjpeg": "9.0.0",
         "imagemin-optipng": "8.0.0",
@@ -4803,6 +4808,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-transform-require-context": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-require-context/-/babel-plugin-transform-require-context-0.1.1.tgz",
+      "integrity": "sha512-4ceqYOtzgmq4/QsB8dP7pUrUOCjY/jrRYdt7YkIOWHxtGDQbcf6YZDyLCiPQf6KsEIcIbSQiTRXOsbLiuJfgNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "7"
+      }
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -9503,6 +9517,12 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+      "dev": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -10058,6 +10078,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=",
+      "dev": true,
+      "dependencies": {
+        "harmony-reflect": "^1.4.6"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -25156,6 +25188,15 @@
         "@babel/helper-define-polyfill-provider": "^0.3.0"
       }
     },
+    "babel-plugin-transform-require-context": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-require-context/-/babel-plugin-transform-require-context-0.1.1.tgz",
+      "integrity": "sha512-4ceqYOtzgmq4/QsB8dP7pUrUOCjY/jrRYdt7YkIOWHxtGDQbcf6YZDyLCiPQf6KsEIcIbSQiTRXOsbLiuJfgNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "7"
+      }
+    },
     "babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -28801,6 +28842,12 @@
         "strip-bom-string": "^1.0.0"
       }
     },
+    "harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -29205,6 +29252,15 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=",
+      "dev": true,
+      "requires": {
+        "harmony-reflect": "^1.4.6"
+      }
+    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -35060,6 +35116,7 @@
     },
     "rehype-img-size": {
       "version": "git+ssh://git@github.com/unicorn-utterances/rehype-img-size.git#6623518819a1008c407ccd55ad07782ba3386646",
+      "integrity": "sha512-2smdNMoXquBgud4Agp2EhKLr9cfoLhvd4o2yptxns7/YO5iAY20SAcdkbAaFwrRDIJcgrV6NoDdIU5kEcaluyw==",
       "from": "rehype-img-size@git+https://github.com/unicorn-utterances/rehype-img-size.git#relative-path-full",
       "requires": {
         "image-size": "^1.0.0",
@@ -35217,6 +35274,7 @@
     },
     "rehype-slug": {
       "version": "git+ssh://git@github.com/unicorn-utterances/rehype-slug.git#f1cb31f0293474d34cd49ef47cf801bb65ad362a",
+      "integrity": "sha512-6oFfe/y2izcjTzTyF29SMrclBKpJtz99sHlfIRq8ztQq3T5bn8OlEYrF8dtxTClfzDt3FV/CvbMqnjKy2aTHjQ==",
       "from": "rehype-slug@git+https://github.com/unicorn-utterances/rehype-slug.git#built-custom-slug",
       "requires": {
         "@types/hast": "^2.0.0",

package.json

@@ -8,6 +8,7 @@
     "build": "npm run lunr && npm run rss && next build && next export",
     "build-beta": "env-cmd -f ./src/environments/beta.env npm run build",
     "start": "next start",
+    "test": "jest",
     "typecheck": "tsc",
     "lint": "next lint",
     "postinstall": "husky install"
@@ -56,6 +57,8 @@
     "unist-util-flat-filter": "^2.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
     "@svgr/webpack": "^6.1.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -66,6 +69,8 @@
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/webpack-env": "^1.16.3",
+    "babel-jest": "^27.4.5",
+    "babel-plugin-transform-require-context": "^0.1.1",
     "env-cmd": "^10.1.0",
     "esbuild-node-loader": "^0.6.3",
     "eslint": "^7.32.0",
@@ -75,6 +80,7 @@
     "feed": "^4.2.2",
     "hast-util-heading-rank": "^2.1.0",
     "husky": "^7.0.4",
+    "identity-obj-proxy": "^3.0.0",
     "imagemin-gifsicle": "6.0.1",
     "imagemin-mozjpeg": "9.0.0",
     "imagemin-optipng": "8.0.0",

src/page-components/unicorns/unicorns.test.tsx

@@ -5,7 +5,7 @@ import { MockMultiAuthorPost, MockPost } from "__mocks__/data/mock-post";
 import { MockUnicorn } from "__mocks__/data/mock-unicorn";
 import ReactDOMServer from "react-dom/server";
 import UnicornPage from "../../pages/unicorns/[...pageInfo]";
-import { onLinkClick } from "__mocks__/modules/next-link";
+import { mockOnLinkClick } from "__mocks__/modules/next-link";
 import { RouterContext } from "next/dist/shared/lib/router-context";
 
 const getElement = (fn: () => void) => (
@@ -58,7 +58,7 @@ test("Blog profile page renders", async () => {
   expect(await findByText("2 Articles")).toBeInTheDocument();
   expect(await findByText("10000 Words")).toBeInTheDocument();
 
-  onLinkClick.mockReset();
+  mockOnLinkClick.mockReset();
 
   // Post cards
   const byEls = await findAllByText("by");