patchFile awaits compilation (vercel#72267)

We will wait the server to respond with a compile success message after
a file is patched before proceeding to the next steps in the test to
reduce flakiness.

By doing so, we uncovered a few tests that were passing accidentally due
to flakiness of `patchFile`, and fixed them in the PR.

test/development/middleware-errors/index.test.ts

@@ -55,7 +55,7 @@ describe('middleware - development errors', () => {
       const browser = await next.browser('/')
       await assertHasRedbox(browser)
       await next.patchFile('middleware.js', `export default function () {}`)
-      await assertHasRedbox(browser)
+      await assertNoRedbox(browser)
     })
   })
 
@@ -160,7 +160,7 @@ describe('middleware - development errors', () => {
       await assertHasRedbox(browser)
       expect(await getRedboxSource(browser)).toContain(`eval('test')`)
       await next.patchFile('middleware.js', `export default function () {}`)
-      await assertHasRedbox(browser)
+      await assertNoRedbox(browser)
     })
   })
 
@@ -207,7 +207,7 @@ describe('middleware - development errors', () => {
       expect(source).toContain('middleware.js')
       expect(source).not.toContain('//middleware.js')
       await next.patchFile('middleware.js', `export default function () {}`)
-      await assertHasRedbox(browser)
+      await assertNoRedbox(browser)
     })
   })
 
@@ -311,7 +311,7 @@ describe('middleware - development errors', () => {
         await browser.elementByCss('#nextjs__container_errors_desc').text()
       ).toEqual('Failed to compile')
       await next.patchFile('middleware.js', `export default function () {}`)
-      await assertHasRedbox(browser)
+      await assertNoRedbox(browser)
       expect(await browser.elementByCss('#page-title')).toBeTruthy()
     })
   })

test/e2e/prerender.test.ts

@@ -1133,13 +1133,8 @@ describe('Prerender', () => {
 
         await next.patchFile(
           'pages/index.js',
-          (content) =>
-            content
-              .replace('// throw new', 'throw new')
-              .replace('{/* <div', '<div')
-              .replace('</div> */}', '</div>'),
+          (content) => content.replace('// throw new', 'throw new'),
           async () => {
-            await browser.waitForElementByCss('#after-change')
             // we need to reload the page to trigger getStaticProps
             await browser.refresh()
 

test/e2e/prerender/pages/index.js

@@ -12,7 +12,6 @@ export async function getStaticProps() {
 const Page = ({ world, time }) => {
   return (
     <>
-      {/* <div id='after-change'>idk</div> */}
       <p>hello {world}</p>
       <span>time: {time}</span>
       <Link href="/non-json/[p]" as="/non-json/1" id="non-json">

test/lib/next-modes/base.ts

@@ -74,6 +74,7 @@ export class NextInstance {
   public forcedPort?: string
   public dirSuffix: string = ''
   public serverReadyPattern?: RegExp = / ✓ Ready in /
+  public serverCompiledPattern?: RegExp = / ✓ Compiled /
 
   constructor(opts: NextInstanceOpts) {
     this.env = {}

test/lib/next-modes/next-dev.ts

@@ -174,6 +174,18 @@ export class NextDevInstance extends NextInstance {
               throw new Error('Server has not finished restarting.')
             }
           })
+        } else {
+          try {
+            await retry(async () => {
+              const cliOutput = this.cliOutput.slice(cliOutputLength)
+
+              if (!this.serverCompiledPattern.test(cliOutput)) {
+                throw new Error('Server has not finished restarting.')
+              }
+            }, 5000)
+          } catch (e) {
+            /** Fail silently because not all change will be reflected in the server output */
+          }
         }
       }
     }