From 7d4907be156db4240af13bd3c6e9f8ade7910232 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 1 Oct 2024 12:19:01 +0200
Subject: [PATCH] Turbopack build: Fix client-components-tree-shaking test

---
 .../app/layout.js                             |  2 +-
 .../index.test.ts                             | 83 ++++++++-----------
 test/turbopack-build-tests-manifest.json      |  5 +-
 3 files changed, 38 insertions(+), 52 deletions(-)

diff --git a/test/production/app-dir/client-components-tree-shaking/app/layout.js b/test/production/app-dir/client-components-tree-shaking/app/layout.js
index 37aa5382811b7..253f5de8af3d5 100644
--- a/test/production/app-dir/client-components-tree-shaking/app/layout.js
+++ b/test/production/app-dir/client-components-tree-shaking/app/layout.js
@@ -6,4 +6,4 @@ export default function RootLayout({ children }) {
   )
 }
 
-export const dynamic = 'forced-dynamic'
+export const dynamic = 'force-dynamic'
diff --git a/test/production/app-dir/client-components-tree-shaking/index.test.ts b/test/production/app-dir/client-components-tree-shaking/index.test.ts
index bbdeaba6d2e65..3893f54eb6625 100644
--- a/test/production/app-dir/client-components-tree-shaking/index.test.ts
+++ b/test/production/app-dir/client-components-tree-shaking/index.test.ts
@@ -1,6 +1,4 @@
-import fs from 'fs'
 import { nextTestSetup } from 'e2e-utils'
-import { join } from 'path'
 
 describe('app-dir client-components-tree-shaking', () => {
   const { next, skipped } = nextTestSetup({
@@ -10,22 +8,19 @@ describe('app-dir client-components-tree-shaking', () => {
   if (skipped) return
 
   it('should only include imported components 3rd party package in browser bundle with direct imports', async () => {
-    const clientChunksDir = join(
-      next.testDir,
-      '.next',
-      'static',
-      'chunks',
-      'app',
-      'third-party-dep'
+    const $ = await next.render$('/third-party-dep')
+    const chunkContents = await Promise.all(
+      $('script[src]')
+        .toArray()
+        .map(async (el) => {
+          const href = $(el).attr('src')
+
+          const file = await next.fetch(href).then((res) => res.text())
+
+          return file
+        })
     )
-    const staticChunksDirents = fs.readdirSync(clientChunksDir, {
-      withFileTypes: true,
-    })
-    const chunkContents = staticChunksDirents
-      .filter((dirent) => dirent.isFile())
-      .map((chunkDirent) =>
-        fs.readFileSync(join(chunkDirent.path, chunkDirent.name), 'utf8')
-      )
+
     expect(
       chunkContents.some((content) => content.includes('client-dep-bar:esm'))
     ).toBe(true)
@@ -40,23 +35,18 @@ describe('app-dir client-components-tree-shaking', () => {
   })
 
   it('should only include the imported identifier of CJS module in browser bundle', async () => {
-    const clientChunksDir = join(
-      next.testDir,
-      '.next',
-      'static',
-      'chunks',
-      'app',
-      'cjs-dep'
-    )
+    const $ = await next.render$('/cjs-dep')
+    const chunkContents = await Promise.all(
+      $('script[src]')
+        .toArray()
+        .map(async (el) => {
+          const href = $(el).attr('src')
 
-    const chunkContents = fs
-      .readdirSync(clientChunksDir, {
-        withFileTypes: true,
-      })
-      .filter((dirent) => dirent.isFile())
-      .map((chunkDirent) =>
-        fs.readFileSync(join(chunkDirent.path, chunkDirent.name), 'utf8')
-      )
+          const file = await next.fetch(href).then((res) => res.text())
+
+          return file
+        })
+    )
 
     expect(
       chunkContents.some((content) => content.includes('cjs-client:default'))
@@ -87,22 +77,19 @@ describe('app-dir client-components-tree-shaking', () => {
   })
 
   it('should only include imported relative components in browser bundle with direct imports', async () => {
-    const clientChunksDir = join(
-      next.testDir,
-      '.next',
-      'static',
-      'chunks',
-      'app',
-      'relative-dep'
+    const $ = await next.render$('/relative-dep')
+    const chunkContents = await Promise.all(
+      $('script[src]')
+        .toArray()
+        .map(async (el) => {
+          const href = $(el).attr('src')
+
+          const file = await next.fetch(href).then((res) => res.text())
+
+          return file
+        })
     )
-    const staticChunksDirents = fs.readdirSync(clientChunksDir, {
-      withFileTypes: true,
-    })
-    const chunkContents = staticChunksDirents
-      .filter((dirent) => dirent.isFile())
-      .map((chunkDirent) =>
-        fs.readFileSync(join(chunkDirent.path, chunkDirent.name), 'utf8')
-      )
+
     expect(
       chunkContents.some((content) => content.includes('client-comp-imported'))
     ).toBe(true)
diff --git a/test/turbopack-build-tests-manifest.json b/test/turbopack-build-tests-manifest.json
index e75b1b19d5539..53f82f5a7af14 100644
--- a/test/turbopack-build-tests-manifest.json
+++ b/test/turbopack-build-tests-manifest.json
@@ -15773,13 +15773,12 @@
     "test/production/app-dir/client-components-tree-shaking/index.test.ts": {
       "passed": [
         "app-dir client-components-tree-shaking should able to resolve the client module entry with mixing rexports",
-        "app-dir client-components-tree-shaking should handle mixing namespace imports and named imports from client components"
-      ],
-      "failed": [
+        "app-dir client-components-tree-shaking should handle mixing namespace imports and named imports from client components",
         "app-dir client-components-tree-shaking should only include imported components 3rd party package in browser bundle with direct imports",
         "app-dir client-components-tree-shaking should only include imported relative components in browser bundle with direct imports",
         "app-dir client-components-tree-shaking should only include the imported identifier of CJS module in browser bundle"
       ],
+      "failed": [],
       "pending": [],
       "flakey": [],
       "runtimeError": false