Create a separate tsconfig file to specify jsx mode.

Next.js requires the typescript jsx mode to be `preserve`, but ts-jest
needs it to be a flavor of `react`. See:

- https://www.typescriptlang.org/docs/handbook/jsx.html
- https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig
- kulshekhar/ts-jest#63 (comment)
- vercel/next.js#19155 (reply in thread)

app/jest.config.js

@@ -19,5 +19,10 @@ module.exports = {
   testPathIgnorePatterns: [
     "<rootDir>/node_modules/",
   ],
-  testRegex: "(/test/.*(test|spec))\\.[jt]sx?$"
+  testRegex: "(/test/.*(test|spec))\\.[jt]sx?$",
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.ts-jest.json'
+    }
+  }
 };

app/tsconfig.json

@@ -2,10 +2,16 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@pages/*": ["pages/*"]
+      "@pages/*": [
+        "pages/*"
+      ]
     },
     "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,
@@ -17,9 +23,16 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__mocks__/styleMock.js"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "__mocks__/styleMock.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

app/tsconfig.ts-jest.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}