diff --git a/docs/testing.md b/docs/testing.md index a1442082049d3..42f83416a1a24 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -320,17 +320,7 @@ const createJestConfig = nextJest({ const customJestConfig = { // Add more setup options before each test is run // setupFilesAfterEnv: ['/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', '/'], - // 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: { - '@/(.*)$': '/src/$1', - }, testEnvironment: 'jest-environment-jsdom', } diff --git a/packages/next/src/build/swc/options.ts b/packages/next/src/build/swc/options.ts index 7499ec9c47c7c..9d4d91ed190db 100644 --- a/packages/next/src/build/swc/options.ts +++ b/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) diff --git a/test/production/jest/relay/app/jest.config.js b/test/production/jest/relay/app/jest.config.js index 23f86dd58d7cf..a52ceba313029 100644 --- a/test/production/jest/relay/app/jest.config.js +++ b/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', '/'], testEnvironment: 'jest-environment-jsdom', - moduleNameMapper: { - // When changing these, also look at the tsconfig! - '^types/(.+)$': '/types/$1', - }, } // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async diff --git a/test/production/jest/relay/app/pages/_app.tsx b/test/production/jest/relay/app/pages/_app.tsx index ec6e4caf2db11..63271041b64ef 100644 --- a/test/production/jest/relay/app/pages/_app.tsx +++ b/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 ( diff --git a/test/production/jest/relay/app/pages/index.tsx b/test/production/jest/relay/app/pages/index.tsx index f03d8d22378b6..96e8277a46ace 100644 --- a/test/production/jest/relay/app/pages/index.tsx +++ b/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() diff --git a/test/production/jest/relay/app/tsconfig.json b/test/production/jest/relay/app/tsconfig.json index d5a9c1e3401c7..776590cecf2ff 100644 --- a/test/production/jest/relay/app/tsconfig.json +++ b/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"], diff --git a/test/production/jest/relay/relay-jest.test.ts b/test/production/jest/relay/relay-jest.test.ts index d829a323fe421..e88973360d507 100644 --- a/test/production/jest/relay/relay-jest.test.ts +++ b/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 () => { diff --git a/test/production/jest/remove-react-properties/app/jest.config.js b/test/production/jest/remove-react-properties/app/jest.config.js index 23f86dd58d7cf..a52ceba313029 100644 --- a/test/production/jest/remove-react-properties/app/jest.config.js +++ b/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', '/'], testEnvironment: 'jest-environment-jsdom', - moduleNameMapper: { - // When changing these, also look at the tsconfig! - '^types/(.+)$': '/types/$1', - }, } // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async diff --git a/test/production/jest/remove-react-properties/app/pages/index.js b/test/production/jest/remove-react-properties/app/pages/index.tsx similarity index 100% rename from test/production/jest/remove-react-properties/app/pages/index.js rename to test/production/jest/remove-react-properties/app/pages/index.tsx diff --git a/test/production/jest/remove-react-properties/app/tsconfig.json b/test/production/jest/remove-react-properties/app/tsconfig.json new file mode 100644 index 0000000000000..776590cecf2ff --- /dev/null +++ b/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"] +} diff --git a/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts b/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts index 3c13cab629b5e..fed569c147e22 100644 --- a/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts +++ b/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`,