Update test config to leverage swc (#28400)

This updates our `jest` configuration to no longer use `babel-jest` and instead uses `@swc/jest` which is much faster. This also updates to the latest version of `jest`, fixes our `tsconfig.json` used for tests (previously types in `node_modules` weren't resolved correctly), and ensures `next/dist` isn't un-necessarily transpiled in `jest`. 

Timings for `yarn testheadless test/unit/` on CI
- before: 3m 30s - 4m ([example run](https://github.com/vercel/next.js/runs/3394701995))
- after: under 1m ([example run](https://github.com/vercel/next.js/pull/28400/checks?check_run_id=3395161621))

Timings for `yarn testheadless test/unit/` locally on m1 mac 
- before: 90.16 seconds
- after: 29.92 seconds

jest.config.js

@@ -7,4 +7,39 @@ module.exports = {
   globalTeardown: '<rootDir>/jest-global-teardown.js',
   setupFilesAfterEnv: ['<rootDir>/jest-setup-after-env.js'],
   testEnvironment: '<rootDir>/jest-environment.js',
+  transformIgnorePatterns: ['/node_modules/', '/next[/\\\\]dist/'],
+  transform: {
+    '.+\\.(t|j)sx?$': [
+      // this matches our SWC options used in https://github.com/vercel/next.js/blob/canary/packages/next/taskfile-swc.js
+      '@swc/jest',
+      {
+        module: {
+          type: 'commonjs',
+        },
+        env: {
+          targets: {
+            node: '12.0.0',
+          },
+        },
+        jsc: {
+          loose: true,
+
+          parser: {
+            syntax: 'typescript',
+            dynamicImport: true,
+            tsx: true,
+          },
+          transform: {
+            react: {
+              pragma: 'React.createElement',
+              pragmaFrag: 'React.Fragment',
+              throwIfNamespace: true,
+              development: false,
+              useBuiltins: true,
+            },
+          },
+        },
+      },
+    ],
+  },
 }

package.json

@@ -51,6 +51,7 @@
     "@mdx-js/loader": "0.18.0",
     "@svgr/webpack": "5.5.0",
     "@swc/core": "1.2.80",
+    "@swc/jest": "0.2.2",
     "@testing-library/react": "11.2.5",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
@@ -68,8 +69,6 @@
     "alex": "9.1.0",
     "amphtml-validator": "1.0.33",
     "async-sema": "3.0.1",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.0.0-next.5",
     "browserslist": "^4.14.7",
     "browserstack-local": "1.4.0",
     "cheerio": "0.22.0",
@@ -98,7 +97,7 @@
     "image-size": "0.9.3",
     "is-animated": "2.0.0",
     "isomorphic-unfetch": "3.0.0",
-    "jest": "27.0.0-next.8",
+    "jest": "27.0.6",
     "ky": "0.19.1",
     "ky-universal": "0.6.0",
     "lerna": "4.0.0",

test/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["next/babel"]
-}

test/integration/serverless/test/index.test.js

@@ -16,7 +16,6 @@ import {
   getPageFileFromPagesManifest,
 } from 'next-test-utils'
 import qs from 'querystring'
-import path from 'path'
 import fetch from 'node-fetch'
 
 const appDir = join(__dirname, '../')
@@ -75,7 +74,7 @@ describe('Serverless', () => {
 
     // ensure top-level static does not exist (important for test)
     // we expect /public/static, though.
-    expect(existsSync(path.join(appDir, 'static'))).toBe(false)
+    expect(existsSync(join(appDir, 'static'))).toBe(false)
 
     const res = await fetchViaHTTP(appPort, '/static/404')
     expect(res.status).toBe(404)

test/tsconfig.json

@@ -3,8 +3,12 @@
     "module": "esnext",
     "target": "es6",
     "allowJs": true,
-    "baseUrl": "./lib",
-    "noEmit": true
-  },
-  "include": ["./**/*"]
+    "noEmit": true,
+    "baseUrl": "../",
+    "paths": {
+      "next-test-utils": ["./test/lib/next-test-utils"],
+      "amp-test-utils": ["./test/lib/amp-test-utils"],
+      "next-webdriver": ["./test/lib/next-webdriver"]
+    }
+  }
 }