diff --git a/test/integration/module-id-strategies/components/CustomComponent.tsx b/test/integration/module-id-strategies/components/CustomComponent.tsx new file mode 100644 index 0000000000000..279e4861a926d --- /dev/null +++ b/test/integration/module-id-strategies/components/CustomComponent.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +async function CustomComponent() { + return ( +
+

the content of a dynamic component

+
+ ) +} + +export default CustomComponent diff --git a/test/integration/module-id-strategies/module-with-long-name.js b/test/integration/module-id-strategies/module-with-long-name.js new file mode 100644 index 0000000000000..ece22b30c245a --- /dev/null +++ b/test/integration/module-id-strategies/module-with-long-name.js @@ -0,0 +1,3 @@ +module.exports = { + foo: 'the content of a module with a long name', +} diff --git a/test/integration/module-id-strategies/next.config.js b/test/integration/module-id-strategies/next.config.js new file mode 100644 index 0000000000000..40c2e5b7e65a1 --- /dev/null +++ b/test/integration/module-id-strategies/next.config.js @@ -0,0 +1,4 @@ +module.exports = { + bundlePagesRouterDependencies: true, + serverExternalPackages: ['opted-out-external-package'], +} diff --git a/test/integration/module-id-strategies/node_modules/external-module-with-long-name.js b/test/integration/module-id-strategies/node_modules/external-module-with-long-name.js new file mode 100644 index 0000000000000..8bb699844c52a --- /dev/null +++ b/test/integration/module-id-strategies/node_modules/external-module-with-long-name.js @@ -0,0 +1,3 @@ +module.exports = { + bar: 'the content of an external module with a long name', +} diff --git a/test/integration/module-id-strategies/pages/index.js b/test/integration/module-id-strategies/pages/index.js new file mode 100644 index 0000000000000..5764ac78f6744 --- /dev/null +++ b/test/integration/module-id-strategies/pages/index.js @@ -0,0 +1,19 @@ +import { foo } from '../module-with-long-name' +import { bar } from '../node_modules/external-module-with-long-name' +import dynamic from 'next/dynamic' + +const DynamicCustomComponent = dynamic( + () => import('../components/CustomComponent'), + { + loading: () =>

Loading...

, + } +) + +export default function Index() { + return ( +
+ + {foo} {bar} +
+ ) +} diff --git a/test/integration/module-id-strategies/test/index.test.js b/test/integration/module-id-strategies/test/index.test.js new file mode 100644 index 0000000000000..6776f1fa69f01 --- /dev/null +++ b/test/integration/module-id-strategies/test/index.test.js @@ -0,0 +1,121 @@ +/* eslint-env jest */ + +import fs from 'fs-extra' +import { join } from 'path' +import { + killApp, + findPort, + launchApp, + nextBuild, + renderViaHTTP, +} from 'next-test-utils' + +const appDir = join(__dirname, '../') + +let appPort +let app + +describe('minified module ids', () => { + ;(!process.env.TURBOPACK || process.env.TURBOPACK_DEV + ? describe.skip + : describe)('production mode', () => { + let ssrBundles = '' + let staticBundles = '' + + beforeAll(async () => { + await nextBuild(appDir, []) + + const ssrPath = join(appDir, '.next/server/chunks/ssr/') + const ssrBundleBasenames = (await fs.readdir(ssrPath)).filter((p) => + p.match(/\.js$/) + ) + for (const basename of ssrBundleBasenames) { + const output = await fs.readFile(join(ssrPath, basename), 'utf8') + ssrBundles += output + } + + const staticPath = join(appDir, '.next/static/chunks/') + const staticBundleBasenames = (await fs.readdir(staticPath)).filter((p) => + p.match(/\.js$/) + ) + for (const basename of staticBundleBasenames) { + const output = await fs.readFile(join(staticPath, basename), 'utf8') + staticBundles += output + } + }) + + it('should have no long module ids for basic modules', async () => { + expect(ssrBundles).not.toContain('module-with-long-name') + expect(ssrBundles).toContain('the content of a module with a long name') + }) + + it('should have no long module ids for external modules', async () => { + expect(ssrBundles).not.toContain('external-module-with-long-name') + expect(ssrBundles).toContain( + 'the content of an external module with a long name' + ) + }) + + it('should have no long module ids for async loader modules', async () => { + expect(ssrBundles).not.toContain('CustomComponent.tsx') + expect(ssrBundles).toContain('the content of a dynamic component') + }) + + it('should have no long module id for the next client runtime module', async () => { + expect(staticBundles).not.toContain('next/dist/client/next-turbopack') + }) + }) + ;(!process.env.TURBOPACK || process.env.TURBOPACK_BUILD + ? describe.skip + : describe)('development mode', () => { + let ssrBundles = '' + let staticBundles = '' + + beforeAll(async () => { + appPort = await findPort() + app = await launchApp(appDir, appPort) + + await renderViaHTTP(appPort, '/') + + const ssrPath = join(appDir, '.next/server/chunks/ssr/') + const ssrBundleBasenames = (await fs.readdir(ssrPath)).filter((p) => + p.match(/\.js$/) + ) + for (const basename of ssrBundleBasenames) { + const output = await fs.readFile(join(ssrPath, basename), 'utf8') + ssrBundles += output + } + + const staticPath = join(appDir, '.next/static/chunks/') + const staticBundleBasenames = (await fs.readdir(staticPath)).filter((p) => + p.match(/\.js$/) + ) + for (const basename of staticBundleBasenames) { + const output = await fs.readFile(join(staticPath, basename), 'utf8') + staticBundles += output + } + }) + afterAll(() => killApp(app)) + + it('should have long module ids for basic modules', async () => { + expect(ssrBundles).toContain('module-with-long-name') + expect(ssrBundles).toContain('the content of a module with a long name') + }) + + it('should have long module ids for external modules', async () => { + expect(ssrBundles).toContain('external-module-with-long-name') + expect(ssrBundles).toContain( + 'the content of an external module with a long name' + ) + }) + + it('should have long module ids for async loader modules', async () => { + expect(ssrBundles).toContain('CustomComponent.tsx') + expect(ssrBundles).toContain('the content of a dynamic component') + }) + + it('should have long module id for the next client runtime module', async () => { + expect(staticBundles).toContain('next/dist/client/next-dev-turbopack') + }) + }) +})