Use next/jest for testing (#537)

* Use next/jest

* Make sure that testing react componentss works

jest.config.js

@@ -1,28 +1,26 @@
-module.exports = {
-    collectCoverageFrom: ["src/**/*.{js,ts,jsx,tsx}", "!**/*.d.ts"],
-    moduleNameMapper: {
-        // Handle CSS imports (with CSS modules)
-        // https://jestjs.io/docs/webpack#mocking-css-modules
-        "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+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
+/** @type {import('@jest/types').Config.InitialOptions} */
+const customJestConfig = {
+    // testEnvironment: "jest-environment-jsdom",
 
-        // Handle CSS imports (without CSS modules)
-        "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
+    // Add more setup options before each test is run
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
 
-        // Handle image imports
-        // https://jestjs.io/docs/webpack#handling-static-assets
-        "^.+\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/__mocks__/fileMock.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>/"],
 
+    moduleNameMapper: {
         // Handle module aliases
         "^\\^/(.*)$": "<rootDir>/src/$1",
     },
-    testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
-    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"] }],
-    },
-    transformIgnorePatterns: [
-        "/node_modules/",
-        "^.+\\.module\\.(css|sass|scss)$",
-    ],
 };
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";