From 402fb80b72f80b8662b5aea5fcc1761468ba9071 Mon Sep 17 00:00:00 2001
From: hainenber <dotronghai96@gmail.com>
Date: Sat, 18 Jan 2025 11:14:55 +0700
Subject: [PATCH] chore: refactor away `act` usage in ImageLoader unit test

Signed-off-by: hainenber <dotronghai96@gmail.com>
---
 .../ListViewCard/ImageLoader.test.tsx         | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/src/components/ListViewCard/ImageLoader.test.tsx b/superset-frontend/src/components/ListViewCard/ImageLoader.test.tsx
index d00b860c4cbac..2449b838f28a0 100644
--- a/superset-frontend/src/components/ListViewCard/ImageLoader.test.tsx
+++ b/superset-frontend/src/components/ListViewCard/ImageLoader.test.tsx
@@ -21,7 +21,7 @@ import fetchMock from 'fetch-mock';
 import ImageLoader, {
   BackgroundPosition,
 } from 'src/components/ListViewCard/ImageLoader';
-import { act, render, screen } from 'spec/helpers/testing-library';
+import { render, screen } from 'spec/helpers/testing-library';
 
 global.URL.createObjectURL = jest.fn(() => '/local_url');
 const blob = new Blob([], { type: 'image/png' });
@@ -41,26 +41,27 @@ describe('ImageLoader', () => {
     position: 'top' as BackgroundPosition,
   };
 
+  const setup = (extraProps = {}) => {
+    const props = { ...defaultProps, ...extraProps };
+    return render(<ImageLoader {...props} />);
+  };
+
   afterEach(() => fetchMock.resetHistory());
 
   it('is a valid element', async () => {
-    await act(async () => {
-      render(<ImageLoader {...defaultProps} />);
-    });
-    expect(screen.getByTestId('image-loader')).toBeVisible();
+    setup();
+    expect(await screen.findByTestId('image-loader')).toBeVisible();
   });
 
   it('fetches loads the image in the background', async () => {
-    await act(async () => {
-      render(<ImageLoader {...defaultProps} />);
-      expect(screen.getByTestId('image-loader')).toHaveAttribute(
-        'src',
-        '/fallback',
-      );
-    });
+    setup();
+    expect(screen.getByTestId('image-loader')).toHaveAttribute(
+      'src',
+      '/fallback',
+    );
     expect(fetchMock.calls(/thumbnail/)).toHaveLength(1);
     expect(global.URL.createObjectURL).toHaveBeenCalled();
-    expect(screen.getByTestId('image-loader')).toHaveAttribute(
+    expect(await screen.findByTestId('image-loader')).toHaveAttribute(
       'src',
       '/local_url',
     );
@@ -68,18 +69,15 @@ describe('ImageLoader', () => {
 
   it('displays fallback image when response is not an image', async () => {
     fetchMock.once('/thumbnail2', {});
-    await act(async () => {
-      const props = { ...defaultProps, src: '/thumbnail2' };
-      render(<ImageLoader {...props} />);
-      expect(screen.getByTestId('image-loader')).toHaveAttribute(
-        'src',
-        '/fallback',
-      );
-    });
-    expect(fetchMock.calls(/thumbnail2/)).toHaveLength(1);
+    setup({ src: '/thumbnail2' });
     expect(screen.getByTestId('image-loader')).toHaveAttribute(
       'src',
       '/fallback',
     );
+    expect(fetchMock.calls(/thumbnail2/)).toHaveLength(1);
+    expect(await screen.findByTestId('image-loader')).toHaveAttribute(
+      'src',
+      '/fallback',
+    );
   });
 });