fix(webapp): stop feed page tests flaking on a cold jest cache

packages/webapp/__tests__/MostDiscussedPage.tsx

@@ -3,7 +3,7 @@ import { MOST_DISCUSSED_FEED_QUERY } from '@dailydotdev/shared/src/graphql/feed'
 import nock from 'nock';
 import React from 'react';
 import type { RenderResult } from '@testing-library/react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { QueryClient } from '@tanstack/react-query';
 import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
 import type { NextRouter } from 'next/router';
@@ -19,6 +19,17 @@ import { COMMENT_FEED_QUERY } from '@dailydotdev/shared/src/graphql/comments';
 import Discussed from '../pages/discussed';
 import { defaultCommentsPage } from './ProfileRepliesPage';
 
+// Compiling the feed module graph takes seconds on a cold jest transform cache,
+// so both the compile in beforeAll and the render need more than the defaults.
+jest.setTimeout(30000);
+const feedTimeout = 5000;
+
+beforeAll(async () => {
+  // MainFeedLayout only reaches the page through next/dynamic, so without this
+  // its compile lands inside the first findBy* wait and eats the whole budget.
+  await import('@dailydotdev/shared/src/components/MainFeedLayout');
+});
+
 beforeEach(() => {
   jest.restoreAllMocks();
   jest.clearAllMocks();
@@ -92,10 +103,10 @@ function renderComponent(
 
 it('should request most discussed feed when logged-in', async () => {
   renderComponent([createCommentFeedMock()]);
-  await waitFor(async () => {
-    const elements = await screen.findAllByTestId('comment');
-    expect(elements.length).toBeTruthy();
+  const elements = await screen.findAllByTestId('comment', undefined, {
+    timeout: feedTimeout,
   });
+  expect(elements.length).toBeTruthy();
 });
 
 it('should not request most discussed feed when not logged-in', async () => {

packages/webapp/__tests__/MostUpvotedPage.tsx

@@ -16,6 +16,17 @@ import { mockGraphQL } from '@dailydotdev/shared/__tests__/helpers/graphql';
 import { TestBootProvider } from '@dailydotdev/shared/__tests__/helpers/boot';
 import Upvoted from '../pages/upvoted';
 
+// Compiling the feed module graph takes seconds on a cold jest transform cache,
+// so both the compile in beforeAll and the render need more than the defaults.
+jest.setTimeout(30000);
+const feedTimeout = 5000;
+
+beforeAll(async () => {
+  // MainFeedLayout only reaches the page through next/dynamic, so without this
+  // its compile lands inside the first findBy* wait and eats the whole budget.
+  await import('@dailydotdev/shared/src/components/MainFeedLayout');
+});
+
 afterEach(() => {
   nock.cleanAll();
 });
@@ -92,7 +103,7 @@ it('should request most upvoted feed when logged-in', async () => {
     () => {
       expect(screen.getAllByTestId('postItem').length).toBeTruthy();
     },
-    { timeout: 3000 },
+    { timeout: feedTimeout },
   );
 });
 
@@ -110,7 +121,10 @@ it('should request most upvoted feed when not', async () => {
     ],
     undefined,
   );
-  await waitFor(() => {
-    expect(screen.getAllByTestId('postItem').length).toBeTruthy();
-  });
+  await waitFor(
+    () => {
+      expect(screen.getAllByTestId('postItem').length).toBeTruthy();
+    },
+    { timeout: feedTimeout },
+  );
 });

packages/webapp/__tests__/MyFeedPage.tsx

@@ -31,8 +31,16 @@ let defaultAlerts: Alerts = { filter: true };
 const updateAlerts = jest.fn();
 const originalScrollTo = window.scrollTo;
 
-beforeAll(() => {
+// Compiling the feed module graph takes seconds on a cold jest transform cache,
+// so both the compile in beforeAll and the render need more than the defaults.
+jest.setTimeout(30000);
+const feedTimeout = 5000;
+
+beforeAll(async () => {
   window.scrollTo = jest.fn();
+  // MainFeedLayout only reaches the page through next/dynamic, so without this
+  // its compile lands inside the first findBy* wait and eats the whole budget.
+  await import('@dailydotdev/shared/src/components/MainFeedLayout');
 });
 
 afterAll(() => {
@@ -144,7 +152,9 @@ it('should request user feed', async () => {
     });
 
   renderComponent([]);
-  const elements = await screen.findAllByTestId('postItem');
+  const elements = await screen.findAllByTestId('postItem', undefined, {
+    timeout: feedTimeout,
+  });
   expect(elements.length).toBeTruthy();
   await waitFor(() => {
     expect(graphQLRequests).toHaveLength(1);
@@ -174,7 +184,9 @@ it('should request anonymous my feed', async () => {
     ],
     undefined,
   );
-  await waitForNock();
-  const elements = await screen.findAllByTestId('postItem');
+  const elements = await screen.findAllByTestId('postItem', undefined, {
+    timeout: feedTimeout,
+  });
   expect(elements.length).toBeTruthy();
+  await waitForNock();
 });

packages/webapp/__tests__/PopularPage.tsx

@@ -19,6 +19,17 @@ import { mockGraphQL } from '@dailydotdev/shared/__tests__/helpers/graphql';
 import { TestBootProvider } from '@dailydotdev/shared/__tests__/helpers/boot';
 import Popular from '../pages/popular';
 
+// Compiling the feed module graph takes seconds on a cold jest transform cache,
+// so both the compile in beforeAll and the render need more than the defaults.
+jest.setTimeout(30000);
+const feedTimeout = 5000;
+
+beforeAll(async () => {
+  // MainFeedLayout only reaches the page through next/dynamic, so without this
+  // its compile lands inside the first findBy* wait and eats the whole budget.
+  await import('@dailydotdev/shared/src/components/MainFeedLayout');
+});
+
 beforeEach(() => {
   jest.restoreAllMocks();
   jest.clearAllMocks();
@@ -86,6 +97,8 @@ it('should request anonymous popular feed', async () => {
     ],
     undefined,
   );
-  const elements = await screen.findAllByTestId('postItem');
+  const elements = await screen.findAllByTestId('postItem', undefined, {
+    timeout: feedTimeout,
+  });
   expect(elements.length).toBeTruthy();
 });