fix(47299): allow testing pages with metadata in jsdom test environment

vercel · Aug 14, 2023 · 8e39538 · 8e39538
1 parent fa88095
commit 8e39538
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 77 deletions.
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -234,7 +234,6 @@
     "image-size": "1.0.0",
     "is-docker": "2.0.0",
     "is-wsl": "2.2.0",
-    "jest-docblock": "29.4.3",
     "jest-worker": "27.0.0-next.5",
     "json5": "2.2.3",
     "jsonwebtoken": "9.0.0",

diff --git a/packages/next/src/build/swc/jest-transformer.ts b/packages/next/src/build/swc/jest-transformer.ts
@@ -29,7 +29,6 @@ DEALINGS IN THE SOFTWARE.
 import vm from 'vm'
 import { transformSync } from './index'
 import { getJestSWCOptions } from './options'
-import * as docblock from 'next/dist/compiled/jest-docblock'
 import type {
   TransformerCreator,
   TransformOptions,
@@ -77,30 +76,16 @@ function isEsm(
   )
 }
 
-function getTestEnvironment(
-  src: string,
-  jestConfig: Config.ProjectConfig
-): string {
-  const docblockPragmas = docblock.parse(docblock.extract(src))
-  const pragma = docblockPragmas['jest-environment']
-  const environment =
-    (Array.isArray(pragma) ? pragma[0] : pragma) ?? jestConfig.testEnvironment
-  return environment
-}
-
 const createTransformer: TransformerCreator<
   SyncTransformer<JestTransformerConfig>,
   JestTransformerConfig
 > = (inputOptions) => ({
   process(src, filename, jestOptions) {
     const jestConfig = getJestConfig(jestOptions)
-    const testEnvironment = getTestEnvironment(src, jestConfig)
 
     const swcTransformOpts = getJestSWCOptions({
-      // When target is node it's similar to the server option set in SWC.
-      isServer:
-        testEnvironment === 'node' ||
-        testEnvironment.includes('jest-environment-node'),
+      // Always target server when compiling during test, to pass server-only validations and allow testing pages with metadatas
+      isServer: true,
       filename,
       jsConfig: inputOptions?.jsConfig,
       resolvedBaseUrl: inputOptions?.resolvedBaseUrl,

diff --git a/packages/next/src/compiled/jest-docblock/LICENSE b/packages/next/src/compiled/jest-docblock/LICENSE
diff --git a/packages/next/src/compiled/jest-docblock/index.js b/packages/next/src/compiled/jest-docblock/index.js
diff --git a/packages/next/src/compiled/jest-docblock/package.json b/packages/next/src/compiled/jest-docblock/package.json
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
@@ -2179,15 +2179,6 @@ export async function ncc_https_proxy_agent(task, opts) {
     .target('src/compiled/https-proxy-agent')
 }
 
-// eslint-disable-next-line camelcase
-externals['jest-docblock'] = 'next/dist/compiled/jest-docblock'
-export async function ncc_jest_docblock(task, opts) {
-  await task
-    .source(relative(__dirname, require.resolve('jest-docblock')))
-    .ncc({ packageName: 'jest-docblock', externals })
-    .target('src/compiled/jest-docblock')
-}
-
 export async function precompile(task, opts) {
   await task.parallel(
     [
@@ -2322,7 +2313,6 @@ export async function ncc(task, opts) {
         'ncc_opentelemetry_api',
         'ncc_http_proxy_agent',
         'ncc_https_proxy_agent',
-        'ncc_jest_docblock',
         'ncc_mini_css_extract_plugin',
       ],
       opts

diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts
@@ -454,8 +454,3 @@ declare module 'next/dist/compiled/@opentelemetry/api' {
   import * as m from '@opentelemetry/api'
   export = m
 }
-
-declare module 'next/dist/compiled/jest-docblock' {
-  import m from 'jest-docblock'
-  export = m
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/production/jest/server-only.test.ts b/test/production/jest/server-only.test.ts
@@ -8,17 +8,19 @@ describe('next/jest', () => {
     next = await createNext({
       skipStart: true,
       files: {
-        'app/page.jsx': `import { PI } from '../lib/util'
-        export default function Home() {
-          return <h1>{PI}</h1>
-        }`,
         'app/layout.jsx': `export default function RootLayout({ children }) {
           return (
             <html lang="en">
               <body>{children}</body>
             </html>
           )
         }`,
+
+        'app/page.jsx': `import { PI } from '../lib/util'
+        export default function Home() {
+          return <h1>{PI}</h1>
+        }`,
+
         'app/page.test.jsx': `import { render, screen } from '@testing-library/react'
         import '@testing-library/jest-dom'
         import Page from './page'
@@ -27,13 +29,42 @@ describe('next/jest', () => {
           render(<Page />)
           expect(screen.getByRole('heading')).toHaveTextContent('3.14')
         })`,
-        'lib/util.js': `/** @jest-environment node */ 
+
+        'app/[blog]/page.jsx': `import { Metadata } from 'next'
+        
+        export async function generateMetadata({
+          params: { blog: title },
+        }) {
+          return { title, description: 'A blog post about ' + title }
+        }
+        
+        export default function Page({ params }) {
+          return <h1>All about {params.blog}</h1>
+        }
+        `,
+
+        'app/[blog]/page.test.jsx': `import { render, screen } from '@testing-library/react'
+        import '@testing-library/jest-dom'
+        import Page from './page'
+        
+        describe('Blog Page', () => {
+          it('has the appropriate title', () => {
+            render(<Page params={{ blog: 'Jane' }} />)
+            expect(screen.getByRole('heading')).toHaveTextContent('All about Jane')
+          })
+        })
+        `,
+
+        'lib/util.js': `
         import 'server-only'
         export const PI = 3.14;`,
-        'lib/utils.test.ts': `import { PI } from './util'
+
+        'lib/utils.test.ts': `
+        import { PI } from './util'
         it('works from server-side code', () => {
           expect(PI).toEqual(3.14)
         })`,
+
         'jest.config.js': `module.exports = require('next/jest')({ dir: './' })({ testEnvironment: 'jsdom' })`,
       },
       buildCommand: `yarn jest`,
@@ -48,11 +79,11 @@ describe('next/jest', () => {
 
   afterAll(() => next.destroy())
 
-  it('can run test against server side components', async () => {
+  it('can run test against server server only code', async () => {
     try {
       await next.start()
     } finally {
-      expect(next.cliOutput).toInclude('Tests:       2 passed, 2 total')
+      expect(next.cliOutput).toInclude('Tests:       3 passed, 3 total')
     }
   })
 })