[next/jest] Support path aliases from tsconfig/jsconfig

docs/testing.md

@@ -320,17 +320,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   // Add more setup options before each test is run
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.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>/'],
 
-  // If you're using [Module Path Aliases](https://nextjs.org/docs/advanced-features/module-path-aliases),
-  // you will have to add the moduleNameMapper in order for jest to resolve your absolute paths.
-  // The paths have to be matching with the paths option within the compilerOptions in the tsconfig.json
-  // For example:
-
-  moduleNameMapper: {
-    '@/(.*)$': '<rootDir>/src/$1',
-  },
   testEnvironment: 'jest-environment-jsdom',
 }
 

packages/next/src/build/swc/options.ts

@@ -183,11 +183,10 @@ export function getJestSWCOptions({
   esm,
   nextConfig,
   jsConfig,
+  resolvedBaseUrl,
   pagesDir,
   hasServerComponents,
-}: // This is not passed yet as "paths" resolving needs a test first
-// resolvedBaseUrl,
-any) {
+}: any) {
   let baseOptions = getBaseSWCOptions({
     filename,
     jest: true,
@@ -197,7 +196,7 @@ any) {
     nextConfig,
     jsConfig,
     hasServerComponents,
-    // resolvedBaseUrl,
+    resolvedBaseUrl,
   })
 
   const isNextDist = nextDistPath.test(filename)

test/production/jest/relay/app/jest.config.js

@@ -10,10 +10,6 @@ const customJestConfig = {
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
-  moduleNameMapper: {
-    // When changing these, also look at the tsconfig!
-    '^types/(.+)$': '<rootDir>/types/$1',
-  },
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

test/production/jest/relay/app/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { RelayEnvironmentProvider } from 'react-relay/hooks'
-import RelayEnvironment from '../components/environment'
+import RelayEnvironment from '@/components/environment'
 
 export default function MyApp({ Component, pageProps }) {
   return (

test/production/jest/relay/app/pages/index.tsx

@@ -1,6 +1,6 @@
 import { graphql, useRelayEnvironment, QueryRenderer } from 'react-relay'
 
-import type { pagesQueryResponse } from '../types/pagesQuery.graphql'
+import type { pagesQueryResponse } from '@/types/pagesQuery.graphql'
 
 function Component() {
   const env = useRelayEnvironment()

test/production/jest/relay/app/tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "paths": {
-      "types/*": ["./types/*"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "tests/entry.test.tsx"],

test/production/jest/relay/relay-jest.test.ts

@@ -17,7 +17,7 @@ describe('next/jest', () => {
         import { RelayEnvironmentProvider } from 'react-relay'
         import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils'
 
-        import Page from '../pages'
+        import Page from '@/pages'
 
         describe('test graphql tag transformation', () => {
           it('should work', async () => {

test/production/jest/remove-react-properties/app/jest.config.js

@@ -10,10 +10,6 @@ const customJestConfig = {
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
-  moduleNameMapper: {
-    // When changing these, also look at the tsconfig!
-    '^types/(.+)$': '<rootDir>/types/$1',
-  },
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

test/production/jest/remove-react-properties/app/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "tests/entry.test.tsx"],
+  "exclude": ["node_modules"]
+}

test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts

@@ -12,11 +12,11 @@ describe('next/jest', () => {
     next = await createNext({
       files: {
         pages: new FileRef(path.join(appDir, 'pages')),
-        'tests/index.test.js': `
+        'tests/index.test.tsx': `
         import { render as renderFn, waitFor } from '@testing-library/react'
         import '@testing-library/jest-dom/extend-expect';
 
-        import Page from '../pages'
+        import Page from '@/pages'
 
         describe('testid', () => {
           it('data-testid should be available in the test', async () => {
@@ -30,6 +30,7 @@ describe('next/jest', () => {
         `,
         'jest.config.js': new FileRef(path.join(appDir, 'jest.config.js')),
         'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+        'tsconfig.json': new FileRef(path.join(appDir, 'tsconfig.json')),
       },
       dependencies: {
         jest: '27.4.7',
@@ -40,7 +41,8 @@ describe('next/jest', () => {
       packageJson: {
         scripts: {
           // Runs jest and bails if jest fails
-          build: 'yarn jest --forceExit tests/index.test.js && yarn next build',
+          build:
+            'yarn jest --forceExit tests/index.test.tsx && yarn next build',
         },
       },
       buildCommand: `yarn build`,