test: Make css bundle assertion work also for turbopack #62127

kdy1 · 2024-02-16T05:20:27Z

What?

Fix one assertion about CSS files emitted by turbopack.

Why?

Turbopack generates /_next/static/chunks/2225ce._.css, which does not match the regex.
Note that it has ._.css. The previous assertions match on [^.]+\.css, which does not support two dots in the file name.

I tried /<link rel="stylesheet" href=".+\.css(\?v=\d+)?"/g, but it captured 3 link tags at once. So I used /<link rel="stylesheet" href="[^<]+\.css(\?v=\d+)?"/g.

How?

Closes PACK-2413

ijjk · 2024-02-16T05:23:45Z

Failing test suites

Commit: 53d7c93

pnpm test-start test/e2e/app-dir/app-css/index.test.ts

app dir - css > css support > chunks > should bundle css resources into chunks

Expand output

● app dir - css › css support › chunks › should bundle css resources into chunks

expect(received).toMatchSnapshot()

Snapshot name: `app dir - css css support chunks should bundle css resources into chunks 1`

New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.

This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.

Received: "<!DOCTYPE html><html class="this-is-the-document-html"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/c00b5720df8f7082.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/e635877b1a427826.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/103c37cab28fb42b.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-2b7b3eae64b2ed4c.js"/><script src="/_next/static/chunks/1fa451c2-dd5f544d9737f106.js" async=""></script><script src="/_next/static/chunks/2776-da9272cac97543e6.js" async=""></script><script src="/_next/static/chunks/main-app-22962a957f3bf099.js" async=""></script><script src="/_next/static/chunks/app/dashboard/page-cd3345b901ada3b7.js" async=""></script><script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body class="this-is-the-document-body"><div class="dangerous-text"><h1 class="green">Dashboard</h1><p id="from-dashboard" class="p">hello from app/dashboard</p><p class="bold">BOLD</p><p class="green">this is green</p><p class="client-comp_client__EGEfF">Hello</p></div><script src="/_next/static/chunks/webpack-2b7b3eae64b2ed4c.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/c00b5720df8f7082.css\",\"style\"]\n2:HL[\"/_next/static/css/e635877b1a427826.css\",\"style\"]\n3:HL[\"/_next/static/css/103c37cab28fb42b.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[2652,[],\"\"]\n6:I[6451,[\"7702\",\"static/chunks/app/dashboard/page-cd3345b901ada3b7.js\"],\"\"]\n7:I[1574,[],\"\"]\n8:I[7612,[],\"\"]\na:I[5030,[],\"\"]\nb:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/c00b5720df8f7082.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"_WmOj5b1xL2zLMDX_R3aL\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/dashboard\",\"initialTree\":[\"\",{\"children\":[\"dashboard\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"dashboard\",{\"children\":[\"__PAGE__\",{},[[\"$L5\",[[\"$\",\"p\",null,{\"id\":\"from-dashboard\",\"className\":\"p\",\"children\":\"hello from app/dashboard\"}],[\"$\",\"p\",null,{\"className\":\"bold\",\"children\":\"BOLD\"}],[\"$\",\"p\",null,{\"className\":\"green\",\"children\":\"this is green\"}],[\"$\",\"$L6\",null,{}]]],null]]},[[\"$\",\"div\",null,{\"className\":\"dangerous-text\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"green\",\"children\":\"Dashboard\"}],[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"dashboard\",\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/103c37cab28fb42b.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}]]}],null]]},[[\"$\",\"html\",null,{\"className\":\"this-is-the-document-html\",\"children\":[[\"$\",\"head\",null,{}],[\"$\",\"body\",null,{\"className\":\"this-is-the-document-body\",\"children\":[\"$\",\"$L7\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"h1\",null,{\"className\":\"not-found not-found_blackBg__c87ow\",\"children\":\"Root not found\"}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b18fc6c99ea1f790.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e635877b1a427826.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}]}]]}],null]],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L9\"],\"globalErrorComponent\":\"$a\",\"missingSlots\":\"$Wb\"}]]\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}]]\n5:null\n"])</script></body></html>"

  290 |           const html = await next.render('/dashboard')
  291 |
> 292 |           expect(html).toMatchSnapshot()
      |                        ^
  293 |           expect(
  294 |             [
  295 |               ...html.matchAll(

  at Object.toMatchSnapshot (e2e/app-dir/app-css/index.test.ts:292:24)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/metadata/metadata.test.ts (PPR)

app dir - metadata > react cache > should have same title and page value when navigating

Expand output

● app dir - metadata › react cache › should have same title and page value when navigating

expect(received).toBe(expected) // Object.is equality

Expected: "0.1556458668267986"
Received: "0.7177627094558172"

  973 |         const obj = JSON.parse(title)
  974 |         // Check `cache()`
> 975 |         expect(obj.val.toString()).toBe(value)
      |                                    ^
  976 |         // Check `fetch()`
  977 |         // TODO-APP: Investigate why fetch deduping doesn't apply but cache() does.
  978 |         if (!isNextDev) {

  at Object.toBe (e2e/app-dir/metadata/metadata.test.ts:975:36)

Read more about building and testing Next.js in contributing.md.

pnpm test-start test/e2e/app-dir/navigation/navigation.test.ts (PPR)

app dir - navigation > navigation between pages and app > should not continously initiate a mpa navigation to the same URL when router state changes

Expand output

● app dir - navigation › navigation between pages and app › should not continously initiate a mpa navigation to the same URL when router state changes

page.waitForSelector: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('#link-to-slow-page')
  -   locator resolved to visible <a href="/slow-page" id="link-to-slow-page">To /slow-page</a>

  421 |     return this.chain(() => {
  422 |       return page
> 423 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  424 |         .then(async (el) => {
  425 |           // it seems selenium waits longer and tests rely on this behavior
  426 |           // so we wait for the load event fire before returning

  at waitForSelector (lib/browsers/playwright.ts:423:10)

Read more about building and testing Next.js in contributing.md.

ijjk · 2024-02-16T05:33:08Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
buildDuration	14.1s	14s	N/A
buildDurationCached	7.3s	8.3s	⚠️ +1s
nodeModulesSize	196 MB	196 MB	✓
nextStartRea..uration (ms)	430ms	434ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
1068-HASH.js gzip	30.3 kB	30.3 kB	N/A
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
4944-HASH.js gzip	5.04 kB	5.03 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	243 B	N/A
main-HASH.js gzip	32.1 kB	32.1 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	47.1 kB	47.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
index.html gzip	529 B	528 B	N/A
link.html gzip	541 B	540 B	N/A
withRouter.html gzip	524 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
edge-ssr.js gzip	2.29 kB	2.29 kB	N/A
page.js gzip	2.98 kB	2.98 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
middleware-b..fest.js gzip	625 B	625 B	✓
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	466 B	465 B	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	1.61 kB	1.61 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
app-page-exp...dev.js gzip	166 kB	166 kB	✓
app-page-exp..prod.js gzip	95.9 kB	95.9 kB	✓
app-page-tur..prod.js gzip	97.6 kB	97.6 kB	✓
app-page-tur..prod.js gzip	92 kB	92 kB	✓
app-page.run...dev.js gzip	136 kB	136 kB	✓
app-page.run..prod.js gzip	90.6 kB	90.6 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.6 kB	14.6 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.6 kB	14.6 kB	✓
pages-api-tu..prod.js gzip	9.47 kB	9.47 kB	✓
pages-api.ru...dev.js gzip	9.74 kB	9.74 kB	✓
pages-api.ru..prod.js gzip	9.47 kB	9.47 kB	✓
pages-turbo...prod.js gzip	22.1 kB	22.1 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22.1 kB	22.1 kB	✓
server.runti..prod.js gzip	50.1 kB	50.1 kB	✓
Overall change	927 kB	927 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js kdy1/pack-2413	Change
0.pack gzip	1.49 MB	1.49 MB	N/A
index.pack gzip	104 kB	104 kB	⚠️ +235 B
Overall change	104 kB	104 kB	⚠️ +235 B

Commit: 18340f9

sokra · 2024-02-16T07:19:36Z

You could have used non-greedy matching

.+\.css -> .+?\.css

kdy1 self-assigned this Feb 16, 2024

kdy1 requested review from timneutkens, ijjk, shuding, huozhi, a team, feedthejim, ztanner and wyattjoh as code owners February 16, 2024 05:20

ijjk added area: tests created-by: Turbopack team PRs by the Turbopack team. labels Feb 16, 2024

kdy1 marked this pull request as draft February 16, 2024 05:38

kdy1 changed the title ~~test: Make one css assertion work also for turbopack~~ test: Make css bundle assertion work also for turbopack Feb 16, 2024

kdy1 marked this pull request as ready for review February 16, 2024 05:50

sokra approved these changes Feb 16, 2024

View reviewed changes

kdy1 enabled auto-merge (squash) February 16, 2024 08:37

kdy1 disabled auto-merge February 16, 2024 08:38

kdy1 added 3 commits February 19, 2024 11:34

Make css assertion work also for turbopack

d47da4e

Rebase

3e1ef22

fix regex

53d7c93

kdy1 force-pushed the kdy1/pack-2413 branch from bbf3d3b to 53d7c93 Compare February 19, 2024 02:35

kdy1 enabled auto-merge (squash) February 19, 2024 02:35

kdy1 disabled auto-merge February 19, 2024 03:11

kdy1 added 2 commits February 19, 2024 12:23

Merge branch 'canary' into kdy1/pack-2413

5d7b9fe

fix

18340f9

kdy1 enabled auto-merge (squash) February 19, 2024 03:26

kdy1 merged commit d8865d0 into canary Feb 19, 2024
65 of 70 checks passed

kdy1 deleted the kdy1/pack-2413 branch February 19, 2024 03:35

github-actions bot added the locked label Mar 4, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: Make css bundle assertion work also for turbopack #62127

test: Make css bundle assertion work also for turbopack #62127

kdy1 commented Feb 16, 2024

ijjk commented Feb 16, 2024 •

edited

Loading

ijjk commented Feb 16, 2024 •

edited

Loading

sokra commented Feb 16, 2024

test: Make css bundle assertion work also for turbopack #62127

test: Make css bundle assertion work also for turbopack #62127

Conversation

kdy1 commented Feb 16, 2024

What?

Why?

How?

ijjk commented Feb 16, 2024 • edited Loading

Failing test suites

ijjk commented Feb 16, 2024 • edited Loading

Stats from current PR

sokra commented Feb 16, 2024

ijjk commented Feb 16, 2024 •

edited

Loading

ijjk commented Feb 16, 2024 •

edited

Loading