Fix flakey upload tests

Author: brophdawg11

integration/file-uploads-test.ts

@@ -61,6 +61,7 @@ test.describe("file-uploads", () => {
           };
 
           export default function Upload() {
+            let actionData = useActionData();
             return (
               <>
                 <Form method="post" encType="multipart/form-data">
@@ -69,7 +70,7 @@ test.describe("file-uploads", () => {
                   <input type="hidden" name="test" value="hidden" />
                   <button type="submit">Submit</button>
                 </Form>
-                <pre>{JSON.stringify(useActionData(), null, 2)}</pre>
+                {actionData ? <pre>{JSON.stringify(actionData, null, 2)}</pre> : null}
               </>
             );
           }
@@ -100,6 +101,7 @@ test.describe("file-uploads", () => {
     await app.goto("/file-upload");
     await app.uploadFile("#file", uploadFile);
     await app.clickSubmitButton("/file-upload");
+    await page.waitForSelector("pre");
     expect(await app.getHtml("pre")).toBe(`<pre>
 {
   "name": "underLimit.txt",
@@ -126,6 +128,7 @@ test.describe("file-uploads", () => {
     await app.goto("/file-upload");
     await app.uploadFile("#file", uploadFile);
     await app.clickSubmitButton("/file-upload");
+    await page.waitForSelector("pre");
     expect(await app.getHtml("pre")).toBe(`<pre>
 {
   "errorMessage": "Field \\"file\\" exceeded upload size of 10000 bytes."

integration/upload-test.ts

@@ -184,6 +184,7 @@ test("can upload a file with createFileUploadHandler", async ({ page }) => {
   await app.goto("/file-upload-handler");
   await app.uploadFile("#file", path.resolve(__dirname, "assets/toupload.txt"));
   await app.clickSubmitButton("/file-upload-handler");
+  await page.waitForSelector("#message");
 
   expect(await app.getHtml("#message")).toMatch(">SUCCESS<");
   expect(await app.getHtml("#size")).toMatch(">13<");
@@ -200,6 +201,7 @@ test("can catch MaxPartSizeExceededError when file is too big with createFileUpl
     path.resolve(__dirname, "assets/touploadtoobig.txt")
   );
   await app.clickSubmitButton("/file-upload-handler");
+  await page.waitForSelector("#message");
 
   expect(await app.getHtml("#message")).toMatch(">FILE_TOO_LARGE<");
   expect(await app.getHtml("#size")).toMatch(">13<");
@@ -210,6 +212,7 @@ test("can upload a file with createMemoryUploadHandler", async ({ page }) => {
   await app.goto("/memory-upload-handler");
   await app.uploadFile("#file", path.resolve(__dirname, "assets/toupload.txt"));
   await app.clickSubmitButton("/memory-upload-handler");
+  await page.waitForSelector("#message");
 
   expect(await app.getHtml("#message")).toMatch(">SUCCESS<");
   expect(await app.getHtml("#size")).toMatch(">13<");
@@ -220,6 +223,7 @@ test("can upload a file with a passthrough handler", async ({ page }) => {
   await app.goto("/passthrough-upload-handler");
   await app.uploadFile("#file", path.resolve(__dirname, "assets/toupload.txt"));
   await app.clickSubmitButton("/passthrough-upload-handler");
+  await page.waitForSelector("#message");
 
   expect(await app.getHtml("#message")).toMatch(">SUCCESS<");
 });
@@ -234,6 +238,7 @@ test("can catch MaxPartSizeExceededError when file is too big with createMemoryU
     path.resolve(__dirname, "assets/touploadtoobig.txt")
   );
   await app.clickSubmitButton("/memory-upload-handler");
+  await page.waitForSelector("#message");
 
   expect(await app.getHtml("#message")).toMatch(">FILE_TOO_LARGE<");
   expect(await app.getHtml("#size")).toMatch(">13<");
@@ -249,8 +254,8 @@ test.describe("without javascript", () => {
       "#file",
       path.resolve(__dirname, "assets/toupload.txt")
     );
-
-    await Promise.all([page.click("#submit"), page.waitForNavigation()]);
+    await page.click("#submit");
+    await page.waitForSelector("#message");
 
     expect(await app.getHtml("#message")).toMatch(">SUCCESS<");
     expect(await app.getHtml("#size")).toMatch(">13<");
@@ -265,8 +270,8 @@ test.describe("without javascript", () => {
       "#file",
       path.resolve(__dirname, "assets/touploadtoobig.txt")
     );
-
-    await Promise.all([page.click("#submit"), page.waitForNavigation()]);
+    await page.click("#submit");
+    await page.waitForSelector("#message");
 
     expect(await app.getHtml("#message")).toMatch(">FILE_TOO_LARGE<");
     expect(await app.getHtml("#size")).toMatch(">13<");
@@ -279,8 +284,8 @@ test.describe("without javascript", () => {
       "#file",
       path.resolve(__dirname, "assets/toupload.txt")
     );
-
-    await Promise.all([page.click("#submit"), page.waitForNavigation()]);
+    await page.click("#submit");
+    await page.waitForSelector("#message");
 
     expect(await app.getHtml("#message")).toMatch(">SUCCESS<");
     expect(await app.getHtml("#size")).toMatch(">13<");
@@ -293,8 +298,8 @@ test.describe("without javascript", () => {
       "#file",
       path.resolve(__dirname, "assets/toupload.txt")
     );
-
-    await Promise.all([page.click("#submit"), page.waitForNavigation()]);
+    await page.click("#submit");
+    await page.waitForSelector("#message");
 
     expect(await app.getHtml("#message")).toMatch(">SUCCESS<");
   });
@@ -308,8 +313,8 @@ test.describe("without javascript", () => {
       "#file",
       path.resolve(__dirname, "assets/touploadtoobig.txt")
     );
-
-    await Promise.all([page.click("#submit"), page.waitForNavigation()]);
+    await page.click("#submit");
+    await page.waitForSelector("#message");
 
     expect(await app.getHtml("#message")).toMatch(">FILE_TOO_LARGE<");
     expect(await app.getHtml("#size")).toMatch(">13<");