diff --git a/web/packages/shared/setupTests.tsx b/web/packages/shared/setupTests.tsx
index 3f83181203977..8bf61734b1944 100644
--- a/web/packages/shared/setupTests.tsx
+++ b/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',
diff --git a/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx b/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx
index cef81a193fc93..1237024a97dbf 100644
--- a/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx
+++ b/web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx
@@ -16,6 +16,7 @@
* along with this program. If not, see .
*/
+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(
);
+ // 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,14 +150,14 @@ 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);
@@ -161,13 +165,13 @@ test('open new tab', () => {
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);