Merge pull request #4327 from coralproject/fix/optimize-comment-conta…

…iner-tests-again

Optimize CommentContainer.spec.tsx test initialization

src/core/client/stream/test/comments/components/CommentContainer.spec.tsx

@@ -1,6 +1,6 @@
-import { screen, within } from "@testing-library/react";
-import { pureMerge } from "coral-common/utils";
+import { screen, waitFor, within } from "@testing-library/react";
 
+import { pureMerge } from "coral-common/utils";
 import { GQLResolver } from "coral-framework/schema";
 import {
   createResolversStub,
@@ -44,7 +44,19 @@ async function createTestRenderer(
 
   customRenderAppWithContext(context);
 
-  const container = await screen.findByTestId("comments-allComments-log");
+  // it is usually best practice to use findByTestId
+  // for async work.
+  //
+  // source: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find
+  //
+  // however, for some special occasions, the test runner
+  // has a hard time and doing a .getByTestId is more
+  // performant. Since this cuts the `render username and body`
+  // test from 1.32s down to 795ms on my machine, I'm doing
+  // a waitFor + getByTestId here.
+  const container = await waitFor(() =>
+    screen.getByTestId("comments-allComments-log")
+  );
 
   return { container, context };
 }