Fix updates outside of act in TabHost tests (#43266)

web/packages/shared/setupTests.tsx

@@ -55,7 +55,6 @@ const failOnConsoleIgnoreList = new Set([
   'web/packages/shared/components/TextEditor/TextEditor.test.tsx',
   'web/packages/teleport/src/components/BannerList/useAlerts.test.tsx',
   'web/packages/teleport/src/Navigation/NavigationItem.test.tsx',
-  'web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx',
   // As of the parent commit (708dac8e0d0), the tests below are flakes.
   // https://github.com/gravitational/teleport/pull/41252#discussion_r1595036569
   'web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx',

web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import 'jest-canvas-mock';
 import { createRef } from 'react';
 import { fireEvent, render, screen } from 'design/utils/testing';
 
@@ -44,7 +45,7 @@ function getMockDocuments(): Document[] {
 
 const rootClusterUri = '/clusters/test_uri';
 
-function getTestSetup({ documents }: { documents: Document[] }) {
+async function getTestSetup({ documents }: { documents: Document[] }) {
   const appContext = new MockAppContext();
   jest.spyOn(appContext.mainProcessClient, 'openTabContextMenu');
 
@@ -78,21 +79,24 @@ function getTestSetup({ documents }: { documents: Document[] }) {
   jest.spyOn(docsService, 'closeToRight');
   jest.spyOn(docsService, 'duplicatePtyAndActivate');
 
-  const utils = render(
+  render(
     <MockAppContextProvider appContext={appContext}>
       <TabHost ctx={appContext} topBarContainerRef={createRef()} />
     </MockAppContextProvider>
   );
 
+  // Mostly a bogus await just so that all useEffects in all of the mounted contexts have time to be
+  // processed and not throw an error due to a state update outside of `act`.
+  expect(await screen.findByTitle(/New Tab/)).toBeInTheDocument();
+
   return {
-    ...utils,
     docsService,
     mainProcessClient: appContext.mainProcessClient,
   };
 }
 
-test('render documents', () => {
-  const { docsService } = getTestSetup({
+test('render documents', async () => {
+  const { docsService } = await getTestSetup({
     documents: getMockDocuments(),
   });
   const documents = docsService.getDocuments();
@@ -101,21 +105,21 @@ test('render documents', () => {
   expect(screen.getByTitle(documents[1].title)).toBeInTheDocument();
 });
 
-test('open tab on click', () => {
-  const { getByTitle, docsService } = getTestSetup({
+test('open tab on click', async () => {
+  const { docsService } = await getTestSetup({
     documents: [getMockDocuments()[0]],
   });
   const documents = docsService.getDocuments();
   const { open } = docsService;
-  const $tabTitle = getByTitle(documents[0].title);
+  const $tabTitle = screen.getByTitle(documents[0].title);
 
   fireEvent.click($tabTitle);
 
   expect(open).toHaveBeenCalledWith(documents[0].uri);
 });
 
-test('open context menu', () => {
-  const { getByTitle, docsService, mainProcessClient } = getTestSetup({
+test('open context menu', async () => {
+  const { docsService, mainProcessClient } = await getTestSetup({
     documents: [getMockDocuments()[0]],
   });
   const { openTabContextMenu } = mainProcessClient;
@@ -124,7 +128,7 @@ test('open context menu', () => {
   const documents = docsService.getDocuments();
   const document = documents[0];
 
-  const $tabTitle = getByTitle(documents[0].title);
+  const $tabTitle = screen.getByTitle(documents[0].title);
 
   fireEvent.contextMenu($tabTitle);
   expect(openTabContextMenu).toHaveBeenCalled();
@@ -146,28 +150,28 @@ test('open context menu', () => {
   expect(duplicatePtyAndActivate).toHaveBeenCalledWith(document.uri);
 });
 
-test('open new tab', () => {
-  const { getByTitle, docsService } = getTestSetup({
+test('open new tab', async () => {
+  const { docsService } = await getTestSetup({
     documents: [getMockDocuments()[0]],
   });
   const { add, open } = docsService;
   const mockedClusterDocument = makeDocumentCluster();
   docsService.createClusterDocument = () => mockedClusterDocument;
-  const $newTabButton = getByTitle('New Tab', { exact: false });
+  const $newTabButton = screen.getByTitle('New Tab', { exact: false });
 
   fireEvent.click($newTabButton);
 
   expect(add).toHaveBeenCalledWith(mockedClusterDocument);
   expect(open).toHaveBeenCalledWith(mockedClusterDocument.uri);
 });
 
-test('swap tabs', () => {
-  const { getByTitle, docsService } = getTestSetup({
+test('swap tabs', async () => {
+  const { docsService } = await getTestSetup({
     documents: getMockDocuments(),
   });
   const documents = docsService.getDocuments();
-  const $firstTab = getByTitle(documents[0].title);
-  const $secondTab = getByTitle(documents[1].title);
+  const $firstTab = screen.getByTitle(documents[0].title);
+  const $secondTab = screen.getByTitle(documents[1].title);
 
   fireEvent.dragStart($secondTab);
   fireEvent.drop($firstTab);