✅ update unit tests

src/components/CodeBox/codeBox.test.tsx

@@ -1,8 +1,14 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import CodeBox from '.';
 
+const mockCopy = jest.fn();
+
+jest.mock('@/utils/clipboard', () => ({
+  copyToClipboard: async (props: string) => mockCopy(props),
+}));
+
 describe('CodeBox component', () => {
   it('should render correct element', () => {
     // Arrange
@@ -19,22 +25,18 @@ describe('CodeBox component', () => {
 
   it('should correctly copy the text when clicked', async () => {
     // Arrange
-    Object.assign(navigator, {
-      clipboard: {
-        writeText: jest.fn().mockImplementation(() => Promise.resolve()),
-      },
-    });
     const code = 'should correctly copy the text when clicked';
     render(<CodeBox>{code}</CodeBox>);
     const copyButton = screen.getByRole('button');
+    const user = userEvent.setup();
     expect(screen.queryByText('複製成功！')).toHaveClass('opacity-0');
     // Act
-    await userEvent.click(copyButton);
-    await userEvent.click(copyButton);
+    await act(() => user.click(copyButton));
+    await act(() => user.click(copyButton));
     // Assert
     expect(screen.queryByText('複製成功！')).not.toHaveClass('opacity-0');
-    expect(navigator.clipboard.writeText).toBeCalledTimes(2);
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+    expect(mockCopy).toBeCalledTimes(2);
+    expect(mockCopy).toHaveBeenCalledWith(code);
     await waitFor(
       () => {
         expect(screen.queryByText('複製成功！')).toHaveClass('opacity-0');

src/components/ThemeSwitcher/themeSwitcher.test.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import { ThemeProvider } from 'next-themes';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { setDeviceTheme } from '~/tests/theme';
 
@@ -30,14 +30,15 @@ describe('ThemeSwitch component', () => {
     setDeviceTheme('dark');
     render(<TestThemeComponent />);
     const button = screen.getByRole('button');
+    const user = userEvent.setup();
     // Act
-    await userEvent.click(button);
+    await act(() => user.click(button))
     // Assert
     expect(document.documentElement.getAttribute('style')).toBe(
       'color-scheme: light;'
     );
     // Act
-    await userEvent.click(button);
+    await act(() => user.click(button));
     // Assert
     expect(document.documentElement.getAttribute('style')).toBe(
       'color-scheme: dark;'