Merge branch 'vitest-fixes' into 'develop'

Vitest fixes

See merge request soapbox-pub/soapbox!2700

app/soapbox/__tests__/toast.test.tsx

@@ -20,7 +20,7 @@ function renderApp() {
 }
 
 beforeAll(() => {
-  jest.spyOn(console, 'error').mockImplementation(() => {});
+  vi.spyOn(console, 'error').mockImplementation(() => {});
 });
 
 afterEach(() => {

app/soapbox/actions/__tests__/compose.test.ts

@@ -41,7 +41,7 @@ describe('uploadCompose()', () => {
 
     it('creates an alert if exceeds max size', async() => {
       const mockIntl = {
-        formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'),
+        formatMessage: vi.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'),
       } as unknown as IntlShape;
 
       const expectedActions = [
@@ -87,7 +87,7 @@ describe('uploadCompose()', () => {
 
     it('creates an alert if exceeds max size', async() => {
       const mockIntl = {
-        formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'),
+        formatMessage: vi.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'),
       } as unknown as IntlShape;
 
       const expectedActions = [

app/soapbox/actions/__tests__/me.test.ts

@@ -7,10 +7,10 @@ import { AuthUserRecord, ReducerRecord } from 'soapbox/reducers/auth';
 
 import { fetchMe, patchMe } from '../me';
 
-jest.mock('../../storage/kv-store', () => ({
+vi.mock('../../storage/kv-store', () => ({
   __esModule: true,
   default: {
-    getItemOrError: jest.fn().mockReturnValue(Promise.resolve({})),
+    getItemOrError: vi.fn().mockReturnValue(Promise.resolve({})),
   },
 }));
 

app/soapbox/actions/__tests__/onboarding.test.ts

@@ -10,11 +10,11 @@ describe('checkOnboarding()', () => {
   });
 
   beforeEach(() => {
-    mockGetItem = jest.fn().mockReturnValue(null);
+    mockGetItem = vi.fn().mockReturnValue(null);
   });
 
   it('does nothing if localStorage item is not set', async() => {
-    mockGetItem = jest.fn().mockReturnValue(null);
+    mockGetItem = vi.fn().mockReturnValue(null);
 
     const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
@@ -27,7 +27,7 @@ describe('checkOnboarding()', () => {
   });
 
   it('does nothing if localStorage item is invalid', async() => {
-    mockGetItem = jest.fn().mockReturnValue('invalid');
+    mockGetItem = vi.fn().mockReturnValue('invalid');
 
     const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
@@ -40,7 +40,7 @@ describe('checkOnboarding()', () => {
   });
 
   it('dispatches the correct action', async() => {
-    mockGetItem = jest.fn().mockReturnValue('1');
+    mockGetItem = vi.fn().mockReturnValue('1');
 
     const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
@@ -61,7 +61,7 @@ describe('startOnboarding()', () => {
   });
 
   beforeEach(() => {
-    mockSetItem = jest.fn();
+    mockSetItem = vi.fn();
   });
 
   it('dispatches the correct action', async() => {
@@ -84,7 +84,7 @@ describe('endOnboarding()', () => {
   });
 
   beforeEach(() => {
-    mockRemoveItem = jest.fn();
+    mockRemoveItem = vi.fn();
   });
 
   it('dispatches the correct action', async() => {

app/soapbox/components/ui/button/__tests__/button.test.tsx

@@ -27,7 +27,7 @@ describe('<Button />', () => {
   });
 
   it('handles click events using the given handler', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Button onClick={handler} />);
 
     fireEvent.click(screen.getByRole('button'));
@@ -35,7 +35,7 @@ describe('<Button />', () => {
   });
 
   it('does not handle click events if props.disabled given', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Button onClick={handler} disabled />);
 
     fireEvent.click(screen.getByRole('button'));

app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx

@@ -6,7 +6,7 @@ import Datepicker from '../datepicker';
 
 describe('<Datepicker />', () => {
   it('defaults to the current date', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Datepicker onChange={handler} />);
     const today = new Date();
 
@@ -16,7 +16,7 @@ describe('<Datepicker />', () => {
   });
 
   it('changes number of days based on selected month and year', async() => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Datepicker onChange={handler} />);
 
     await userEvent.selectOptions(
@@ -43,7 +43,7 @@ describe('<Datepicker />', () => {
   });
 
   it('ranges from the current year to 120 years ago', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Datepicker onChange={handler} />);
     const today = new Date();
 
@@ -54,7 +54,7 @@ describe('<Datepicker />', () => {
   });
 
   it('calls the onChange function when the inputs change', async() => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<Datepicker onChange={handler} />);
     const today = new Date();
 

app/soapbox/components/ui/form/__tests__/form.test.tsx

@@ -5,7 +5,7 @@ import Form from '../form';
 
 describe('<Form />', () => {
   it('renders children', () => {
-    const onSubmitMock = jest.fn();
+    const onSubmitMock = vi.fn();
     render(
       <Form onSubmit={onSubmitMock}>children</Form>,
     );
@@ -14,7 +14,7 @@ describe('<Form />', () => {
   });
 
   it('handles onSubmit prop', () => {
-    const onSubmitMock = jest.fn();
+    const onSubmitMock = vi.fn();
     render(
       <Form onSubmit={onSubmitMock}>children</Form>,
     );

app/soapbox/components/ui/modal/__tests__/modal.test.tsx

@@ -29,7 +29,7 @@ describe('<Modal />', () => {
 
   describe('onClose prop', () => {
     it('renders the Icon to close the modal', async() => {
-      const mockFn = jest.fn();
+      const mockFn = vi.fn();
       const user = userEvent.setup();
 
       render(<Modal title='Modal title' onClose={mockFn} />);
@@ -48,7 +48,7 @@ describe('<Modal />', () => {
 
   describe('confirmationAction prop', () => {
     it('renders the confirmation button', async() => {
-      const mockFn = jest.fn();
+      const mockFn = vi.fn();
       const user = userEvent.setup();
 
       render(
@@ -71,8 +71,8 @@ describe('<Modal />', () => {
 
     describe('with secondaryAction', () => {
       it('renders the secondary button', async() => {
-        const confirmationAction = jest.fn();
-        const secondaryAction = jest.fn();
+        const confirmationAction = vi.fn();
+        const secondaryAction = vi.fn();
         const user = userEvent.setup();
 
         render(
@@ -104,8 +104,8 @@ describe('<Modal />', () => {
 
     describe('with cancelAction', () => {
       it('renders the cancel button', async() => {
-        const confirmationAction = jest.fn();
-        const cancelAction = jest.fn();
+        const confirmationAction = vi.fn();
+        const cancelAction = vi.fn();
         const user = userEvent.setup();
 
         render(

app/soapbox/features/auth-login/components/__tests__/login-form.test.tsx

@@ -7,7 +7,7 @@ import LoginForm from '../login-form';
 
 describe('<LoginForm />', () => {
   it('renders for Pleroma', () => {
-    const mockFn = jest.fn();
+    const mockFn = vi.fn();
     const store = {
       instance: normalizeInstance({
         version: '2.7.2 (compatible; Pleroma 2.3.0)',
@@ -20,7 +20,7 @@ describe('<LoginForm />', () => {
   });
 
   it('renders for Mastodon', () => {
-    const mockFn = jest.fn();
+    const mockFn = vi.fn();
     const store = {
       instance: normalizeInstance({
         version: '3.0.0',
@@ -33,7 +33,7 @@ describe('<LoginForm />', () => {
   });
 
   it('responds to the handleSubmit prop', () => {
-    const mockFn = jest.fn();
+    const mockFn = vi.fn();
     render(<LoginForm handleSubmit={mockFn} isLoading={false} />);
     fireEvent.submit(screen.getByTestId(/button/i));
 

app/soapbox/features/chats/components/__tests__/chat-list-item.test.tsx

@@ -30,7 +30,7 @@ const chat: any = {
 
 describe('<ChatListItem />', () => {
   it('renders correctly', () => {
-    render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
+    render(<ChatListItem chat={chat as IChat} onClick={vi.fn()} />);
 
     expect(screen.getByTestId('chat-list-item')).toBeInTheDocument();
     expect(screen.getByTestId('chat-list-item')).toHaveTextContent(chat.account.display_name);
@@ -38,28 +38,28 @@ describe('<ChatListItem />', () => {
 
   describe('last message content', () => {
     it('renders the last message', () => {
-      render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
+      render(<ChatListItem chat={chat as IChat} onClick={vi.fn()} />);
 
       expect(screen.getByTestId('chat-last-message')).toBeInTheDocument();
     });
 
     it('does not render the last message', () => {
       const changedChat = { ...chat, last_message: null };
-      render(<ChatListItem chat={changedChat as IChat} onClick={jest.fn()} />);
+      render(<ChatListItem chat={changedChat as IChat} onClick={vi.fn()} />);
 
       expect(screen.queryAllByTestId('chat-last-message')).toHaveLength(0);
     });
 
     describe('unread', () => {
       it('renders the unread dot', () => {
-        render(<ChatListItem chat={chat as IChat} onClick={jest.fn()} />);
+        render(<ChatListItem chat={chat as IChat} onClick={vi.fn()} />);
 
         expect(screen.getByTestId('chat-unread-indicator')).toBeInTheDocument();
       });
 
       it('does not render the unread dot', () => {
         const changedChat = { ...chat, last_message: { ...chat.last_message, unread: false } };
-        render(<ChatListItem chat={changedChat as IChat} onClick={jest.fn()} />);
+        render(<ChatListItem chat={changedChat as IChat} onClick={vi.fn()} />);
 
         expect(screen.queryAllByTestId('chat-unread-indicator')).toHaveLength(0);
       });

app/soapbox/features/chats/components/__tests__/chat-message-reaction.test.tsx

@@ -15,8 +15,8 @@ describe('<ChatMessageReaction />', () => {
     render(
       <ChatMessageReaction
         emojiReaction={emojiReaction}
-        onAddReaction={jest.fn()}
-        onRemoveReaction={jest.fn()}
+        onAddReaction={vi.fn()}
+        onRemoveReaction={vi.fn()}
       />,
     );
 
@@ -25,8 +25,8 @@ describe('<ChatMessageReaction />', () => {
   });
 
   it('triggers the "onAddReaction" function', async () => {
-    const onAddFn = jest.fn();
-    const onRemoveFn = jest.fn();
+    const onAddFn = vi.fn();
+    const onRemoveFn = vi.fn();
     const user = userEvent.setup();
 
     render(
@@ -48,8 +48,8 @@ describe('<ChatMessageReaction />', () => {
   });
 
   it('triggers the "onRemoveReaction" function', async () => {
-    const onAddFn = jest.fn();
-    const onRemoveFn = jest.fn();
+    const onAddFn = vi.fn();
+    const onRemoveFn = vi.fn();
     const user = userEvent.setup();
 
     render(

app/soapbox/features/chats/components/__tests__/chat-pane-header.test.tsx

@@ -6,7 +6,7 @@ import ChatPaneHeader from '../chat-widget/chat-pane-header';
 
 describe('<ChatPaneHeader />', () => {
   it('handles the onToggle prop', async () => {
-    const mockFn = jest.fn();
+    const mockFn = vi.fn();
     render(<ChatPaneHeader title='title' onToggle={mockFn} isOpen />);
 
     await userEvent.click(screen.getByTestId('icon-button'));
@@ -17,7 +17,7 @@ describe('<ChatPaneHeader />', () => {
     describe('when it is a string', () => {
       it('renders the title', () => {
         const title = 'Messages';
-        render(<ChatPaneHeader title={title} onToggle={jest.fn()} isOpen />);
+        render(<ChatPaneHeader title={title} onToggle={vi.fn()} isOpen />);
 
         expect(screen.getByTestId('title')).toHaveTextContent(title);
       });
@@ -28,7 +28,7 @@ describe('<ChatPaneHeader />', () => {
         const title = (
           <div><p>hello world</p></div>
         );
-        render(<ChatPaneHeader title={title} onToggle={jest.fn()} isOpen />);
+        render(<ChatPaneHeader title={title} onToggle={vi.fn()} isOpen />);
 
         expect(screen.getByTestId('title')).toHaveTextContent('hello world');
       });
@@ -39,7 +39,7 @@ describe('<ChatPaneHeader />', () => {
     describe('when present', () => {
       it('renders the unread count', () => {
         const count = 14;
-        render(<ChatPaneHeader title='title' onToggle={jest.fn()} isOpen unreadCount={count} />);
+        render(<ChatPaneHeader title='title' onToggle={vi.fn()} isOpen unreadCount={count} />);
 
         expect(screen.getByTestId('unread-count')).toHaveTextContent(String(count));
       });
@@ -48,7 +48,7 @@ describe('<ChatPaneHeader />', () => {
     describe('when 0', () => {
       it('does not render the unread count', () => {
         const count = 0;
-        render(<ChatPaneHeader title='title' onToggle={jest.fn()} isOpen unreadCount={count} />);
+        render(<ChatPaneHeader title='title' onToggle={vi.fn()} isOpen unreadCount={count} />);
 
         expect(screen.queryAllByTestId('unread-count')).toHaveLength(0);
       });
@@ -56,7 +56,7 @@ describe('<ChatPaneHeader />', () => {
 
     describe('when unprovided', () => {
       it('does not render the unread count', () => {
-        render(<ChatPaneHeader title='title' onToggle={jest.fn()} isOpen />);
+        render(<ChatPaneHeader title='title' onToggle={vi.fn()} isOpen />);
 
         expect(screen.queryAllByTestId('unread-count')).toHaveLength(0);
       });
@@ -65,11 +65,11 @@ describe('<ChatPaneHeader />', () => {
 
   describe('secondaryAction prop', () => {
     it('handles the secondaryAction callback', async () => {
-      const mockFn = jest.fn();
+      const mockFn = vi.fn();
       render(
         <ChatPaneHeader
           title='title'
-          onToggle={jest.fn()}
+          onToggle={vi.fn()}
           isOpen
           secondaryAction={mockFn}
           secondaryActionIcon='icon.svg'

app/soapbox/features/compose/components/polls/__tests__/duration-selector.test.tsx

@@ -6,7 +6,7 @@ import DurationSelector from '../duration-selector';
 
 describe('<DurationSelector />', () => {
   it('defaults to 2 days', () => {
-    const handler = jest.fn();
+    const handler = vi.fn();
     render(<DurationSelector onDurationChange={handler} />);
 
     expect(screen.getByTestId('duration-selector-days')).toHaveValue('2');
@@ -16,7 +16,7 @@ describe('<DurationSelector />', () => {
 
   describe('when changing the day', () => {
     it('calls the "onDurationChange" callback', async() => {
-      const handler = jest.fn();
+      const handler = vi.fn();
       render(<DurationSelector onDurationChange={handler} />);
 
       await userEvent.selectOptions(
@@ -29,7 +29,7 @@ describe('<DurationSelector />', () => {
     });
 
     it('should disable the hour/minute select if 7 days selected', async() => {
-      const handler = jest.fn();
+      const handler = vi.fn();
       render(<DurationSelector onDurationChange={handler} />);
 
       expect(screen.getByTestId('duration-selector-hours')).not.toBeDisabled();
@@ -47,7 +47,7 @@ describe('<DurationSelector />', () => {
 
   describe('when changing the hour', () => {
     it('calls the "onDurationChange" callback', async() => {
-      const handler = jest.fn();
+      const handler = vi.fn();
       render(<DurationSelector onDurationChange={handler} />);
 
       await userEvent.selectOptions(
@@ -62,7 +62,7 @@ describe('<DurationSelector />', () => {
 
   describe('when changing the minute', () => {
     it('calls the "onDurationChange" callback', async() => {
-      const handler = jest.fn();
+      const handler = vi.fn();
       render(<DurationSelector onDurationChange={handler} />);
 
       await userEvent.selectOptions(

app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx

@@ -7,7 +7,7 @@ import { __stub } from 'soapbox/api';
 import { render, screen, waitFor } from '../../../jest/test-helpers';
 import FeedCarousel from '../feed-carousel';
 
-jest.mock('../../../hooks/useDimensions', () => ({
+vi.mock('../../../hooks/useDimensions', () => ({
   useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }],
 }));
 
@@ -129,7 +129,7 @@ describe('<FeedCarousel />', () => {
             ]);
         });
 
-        Element.prototype.getBoundingClientRect = jest.fn(() => {
+        Element.prototype.getBoundingClientRect = vi.fn(() => {
           return {
             width: 200,
             height: 120,

app/soapbox/features/groups/__tests__/discover.test.tsx

@@ -7,7 +7,7 @@ import { normalizeInstance } from 'soapbox/normalizers';
 
 import Discover from '../discover';
 
-jest.mock('../../../hooks/useDimensions', () => ({
+vi.mock('../../../hooks/useDimensions', () => ({
   useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }],
 }));
 

app/soapbox/features/groups/components/discover/__tests__/layout-buttons.test.tsx

@@ -8,7 +8,7 @@ import LayoutButtons, { GroupLayout } from '../layout-buttons';
 describe('<LayoutButtons', () => {
   describe('when LIST view', () => {
     it('should render correctly', async () => {
-      const onSelectFn = jest.fn();
+      const onSelectFn = vi.fn();
       const user = userEvent.setup();
 
       render(<LayoutButtons layout={GroupLayout.LIST} onSelect={onSelectFn} />);
@@ -23,7 +23,7 @@ describe('<LayoutButtons', () => {
 
   describe('when GRID view', () => {
     it('should render correctly', async () => {
-      const onSelectFn = jest.fn();
+      const onSelectFn = vi.fn();
       const user = userEvent.setup();
 
       render(<LayoutButtons layout={GroupLayout.GRID} onSelect={onSelectFn} />);

app/soapbox/features/groups/components/discover/search/__tests__/recent-searches.test.tsx

@@ -48,7 +48,7 @@ test.skip('skip', () => {});
 //     });
 
 //     it('should render the recent searches', async () => {
-//       renderApp(<RecentSearches onSelect={jest.fn()} />);
+//       renderApp(<RecentSearches onSelect={vi.fn()} />);
 
 //       await waitFor(() => {
 //         expect(screen.getByTestId('recent-search')).toBeInTheDocument();
@@ -56,7 +56,7 @@ test.skip('skip', () => {});
 //     });
 
 //     it('should support clearing recent searches', async () => {
-//       renderApp(<RecentSearches onSelect={jest.fn()} />);
+//       renderApp(<RecentSearches onSelect={vi.fn()} />);
 
 //       expect(groupSearchHistory.get(userId)).toHaveLength(1);
 //       await userEvent.click(screen.getByTestId('clear-recent-searches'));
@@ -64,7 +64,7 @@ test.skip('skip', () => {});
 //     });
 
 //     it('should support click events on the results', async () => {
-//       const handler = jest.fn();
+//       const handler = vi.fn();
 //       renderApp(<RecentSearches onSelect={handler} />);
 //       expect(handler.mock.calls.length).toEqual(0);
 //       await userEvent.click(screen.getByTestId('recent-search-result'));
@@ -74,7 +74,7 @@ test.skip('skip', () => {});
 
 //   describe('without recent searches', () => {
 //     it('should render the blankslate', async () => {
-//       renderApp(<RecentSearches onSelect={jest.fn()} />);
+//       renderApp(<RecentSearches onSelect={vi.fn()} />);
 
 //       expect(screen.getByTestId('recent-searches-blankslate')).toBeInTheDocument();
 //     });

app/soapbox/features/groups/components/discover/search/__tests__/results.test.tsx

@@ -39,7 +39,7 @@ const groupSearchResult = {
   groups: [buildGroup()],
   hasNextPage: false,
   isFetching: false,
-  fetchNextPage: jest.fn(),
+  fetchNextPage: vi.fn(),
 } as any;
 
 describe('<Results />', () => {

app/soapbox/features/groups/components/discover/search/__tests__/search.test.tsx

@@ -24,7 +24,7 @@ describe('<Search />', () => {
     });
 
     it('should render the blankslate', async () => {
-      renderApp(<Search searchValue={'some-search'} onSelect={jest.fn()} />);
+      renderApp(<Search searchValue={'some-search'} onSelect={vi.fn()} />);
 
       await waitFor(() => {
         expect(screen.getByTestId('no-results')).toBeInTheDocument();
@@ -45,7 +45,7 @@ describe('<Search />', () => {
     });
 
     it('should render the results', async () => {
-      renderApp(<Search searchValue={'some-search'} onSelect={jest.fn()} />);
+      renderApp(<Search searchValue={'some-search'} onSelect={vi.fn()} />);
 
       await waitFor(() => {
         expect(screen.getByTestId('results')).toBeInTheDocument();
@@ -55,7 +55,7 @@ describe('<Search />', () => {
 
   describe('before starting a search', () => {
     it('should render the RecentSearches component', () => {
-      renderApp(<Search searchValue={''} onSelect={jest.fn()} />);
+      renderApp(<Search searchValue={''} onSelect={vi.fn()} />);
 
       expect(screen.getByTestId('recent-searches')).toBeInTheDocument();
     });

app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { __stub } from 'soapbox/api';
+import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers';
 
-import { queryClient, render, screen, waitFor } from '../../../../jest/test-helpers';
 import TrendsPanel from '../trends-panel';
 
 describe('<TrendsPanel />', () => {

app/soapbox/features/ui/components/modals/__tests__/landing-page-modal.test.tsx

@@ -7,25 +7,25 @@ import LandingPageModal from '../landing-page-modal';
 
 describe('<LandingPageModal />', () => {
   it('successfully renders', () => {
-    render(<LandingPageModal onClose={jest.fn} />);
+    render(<LandingPageModal onClose={vi.fn} />);
     expect(screen.getByTestId('modal')).toBeInTheDocument();
   });
 
   it('doesn\'t display the signup button by default', () => {
-    render(<LandingPageModal onClose={jest.fn} />);
+    render(<LandingPageModal onClose={vi.fn} />);
     expect(screen.queryByText('Register')).not.toBeInTheDocument();
   });
 
   describe('with registrations enabled', () => {
     it('displays the signup button', () => {
-      render(<LandingPageModal onClose={jest.fn} />, undefined, storeOpen);
+      render(<LandingPageModal onClose={vi.fn} />, undefined, storeOpen);
       expect(screen.getByText('Register')).toBeInTheDocument();
     });
   });
 
   describe('with registrations closed, Pepe enabled', () => {
     it('displays the signup button', () => {
-      render(<LandingPageModal onClose={jest.fn} />, undefined, storePepeOpen);
+      render(<LandingPageModal onClose={vi.fn} />, undefined, storePepeOpen);
       expect(screen.getByText('Register')).toBeInTheDocument();
     });
   });

app/soapbox/features/ui/components/modals/__tests__/unauthorized-modal.test.tsx

@@ -7,25 +7,25 @@ import UnauthorizedModal from '../unauthorized-modal';
 
 describe('<UnauthorizedModal />', () => {
   it('successfully renders', () => {
-    render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />);
+    render(<UnauthorizedModal onClose={vi.fn} action='FOLLOW' />);
     expect(screen.getByTestId('modal')).toBeInTheDocument();
   });
 
   it('doesn\'t display the signup button by default', () => {
-    render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />);
+    render(<UnauthorizedModal onClose={vi.fn} action='FOLLOW' />);
     expect(screen.queryByText('Sign up')).not.toBeInTheDocument();
   });
 
   describe('with registrations enabled', () => {
     it('displays the signup button', () => {
-      render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />, undefined, storeOpen);
+      render(<UnauthorizedModal onClose={vi.fn} action='FOLLOW' />, undefined, storeOpen);
       expect(screen.getByText('Sign up')).toBeInTheDocument();
     });
   });
 
   describe('with registrations closed, Pepe enabled', () => {
     it('displays the signup button', () => {
-      render(<UnauthorizedModal onClose={jest.fn} action='FOLLOW' />, undefined, storePepeOpen);
+      render(<UnauthorizedModal onClose={vi.fn} action='FOLLOW' />, undefined, storePepeOpen);
       expect(screen.getByText('Sign up')).toBeInTheDocument();
     });
   });

app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx

@@ -51,13 +51,13 @@ test.skip('skip', () => {});
 //   });
 
 //   it('successfully renders the first step', () => {
-//     render(<ReportModal onClose={jest.fn} />, {}, store);
+//     render(<ReportModal onClose={vi.fn} />, {}, store);
 //     expect(screen.getByText('Reason for reporting')).toBeInTheDocument();
 //   });
 
 //   it('successfully moves to the second step', async() => {
 //     const user = userEvent.setup();
-//     render(<ReportModal onClose={jest.fn} />, {}, store);
+//     render(<ReportModal onClose={vi.fn} />, {}, store);
 //     await user.click(screen.getByTestId('rule-1'));
 //     await user.click(screen.getByText('Next'));
 //     expect(screen.getByText(/Further actions:/)).toBeInTheDocument();
@@ -65,7 +65,7 @@ test.skip('skip', () => {});
 
 //   it('successfully moves to the third step', async() => {
 //     const user = userEvent.setup();
-//     render(<ReportModal onClose={jest.fn} />, {}, store);
+//     render(<ReportModal onClose={vi.fn} />, {}, store);
 //     await user.click(screen.getByTestId('rule-1'));
 //     await user.click(screen.getByText(/Next/));
 //     await user.click(screen.getByText(/Submit/));

app/soapbox/hooks/__mocks__/resize-observer.ts

@@ -1,5 +1,5 @@
 let listener: ((rect: any) => void) | undefined = undefined;
-const mockDisconnect = jest.fn();
+const mockDisconnect = vi.fn();
 
 class ResizeObserver {
 

app/soapbox/jest/test-setup.ts

@@ -1,18 +1,18 @@
-'use strict';
-
 import { act } from '@testing-library/react';
 import { toast } from 'react-hot-toast';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom/vitest';
 
 import { __clear as clearApiMocks } from '../api/__mocks__';
 
 // API mocking
-jest.mock('soapbox/api');
+vi.mock('soapbox/api');
 afterEach(() => {
   clearApiMocks();
 });
 
 // Query mocking
-jest.mock('soapbox/queries/client');
+vi.mock('soapbox/queries/client');
 
 // Mock IndexedDB
 // https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17
@@ -26,18 +26,18 @@ afterEach(() => {
 });
 
 const intersectionObserverMock = () => ({ observe: () => null, disconnect: () => null });
-window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
+window.IntersectionObserver = vi.fn().mockImplementation(intersectionObserverMock);
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation(query => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
+    addListener: vi.fn(), // Deprecated
+    removeListener: vi.fn(), // Deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
   })),
 });

package.json

@@ -66,7 +66,6 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@tanstack/react-query": "^4.0.10",
-    "@testing-library/react": "^14.0.0",
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
     "@types/leaflet": "^1.8.0",
@@ -89,7 +88,7 @@
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.15",
     "axios": "^1.2.2",
-    "axios-mock-adapter": "^1.21.1",
+    "axios-mock-adapter": "^1.22.0",
     "babel-plugin-preval": "^5.1.0",
     "babel-plugin-react-intl": "^7.5.20",
     "blurhash": "^2.0.0",
@@ -179,8 +178,10 @@
   "devDependencies": {
     "@gitbeaker/node": "^35.8.0",
     "@jedmao/redux-mock-store": "^3.0.5",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.1",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "babel-plugin-transform-require-context": "^0.1.1",

tsconfig.json

@@ -12,9 +12,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "typeRoots": [ "./types", "./node_modules/@types"],
+    "typeRoots": [
+      "./types",
+      "./node_modules/@types",
+      "./node_modules"
+    ],
     "types": [
       "vite/client",
+      "vitest/globals",
       "vite-plugin-compile-time/client"
     ]
   },

vite.config.ts

@@ -90,5 +90,6 @@ export default defineConfig({
     cache: {
       dir: '../node_modules/.vitest',
     },
+    setupFiles: 'soapbox/jest/test-setup.ts',
   },
 });

yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
+"@adobe/css-tools@^4.3.0":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
+  integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+
 "@akryum/flexsearch-es@^0.7.32":
   version "0.7.32"
   resolved "https://registry.yarnpkg.com/@akryum/flexsearch-es/-/flexsearch-es-0.7.32.tgz#9d00e6bdf2418ae686323a4a9224b7a1568075e9"
@@ -2205,6 +2210,20 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
+"@testing-library/jest-dom@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.3.tgz#443118c9e4043f96396f120de2c7122504a079c5"
+  integrity sha512-YzpjRHoCBWPzpPNtg6gnhasqtE/5O4qz8WCwDEaxtfnPO6gkaLrnuXusrGSPyhIGPezr1HM7ZH0CFaUTY9PJEQ==
+  dependencies:
+    "@adobe/css-tools" "^4.3.0"
+    "@babel/runtime" "^7.9.2"
+    aria-query "^5.0.0"
+    chalk "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
 "@testing-library/react-hooks@^8.0.1":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
@@ -2222,10 +2241,10 @@
     "@testing-library/dom" "^9.0.0"
     "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^14.4.3":
-  version "14.4.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
-  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
+"@testing-library/user-event@^14.5.1":
+  version "14.5.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
+  integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -3229,10 +3248,10 @@ axe-core@^4.6.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.1.tgz#6948854183ee7e7eae336b9877c5bafa027998ea"
   integrity sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ==
 
-axios-mock-adapter@^1.21.1:
-  version "1.21.1"
-  resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.21.1.tgz#efe7e46ad1b0d2acd72188afa91c5720660777b3"
-  integrity sha512-Pdm7nZuhkz/DSucQ4Bbo9qVBqfm9j7ev9ycTvIXHqvAjnJEjWPHKYfTfpounVp8MwjFFSHXGS7hCkTwAswtSTA==
+axios-mock-adapter@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.22.0.tgz#0f3e6be0fc9b55baab06f2d49c0b71157e7c053d"
+  integrity sha512-dmI0KbkyAhntUR05YY96qg2H6gg0XMl2+qTW0xmYg6Up+BFBAJYRLROMXRdDEL06/Wqwa0TJThAYvFtSFdRCZw==
   dependencies:
     fast-deep-equal "^3.1.3"
     is-buffer "^2.0.5"
@@ -3529,6 +3548,14 @@ chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -3841,6 +3868,11 @@ css-what@^6.0.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -4160,6 +4192,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.5.6:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
+
 dom-accessibility-api@^0.5.9:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b"
@@ -6563,7 +6600,7 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
-min-indent@^1.0.1:
+min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
@@ -7963,6 +8000,14 @@ realistic-structured-clone@^3.0.0:
     typeson "^6.1.0"
     typeson-registry "^1.0.0-alpha.20"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 redent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-4.0.0.tgz#0c0ba7caabb24257ab3bb7a4fd95dd1d5c5681f9"
@@ -8604,6 +8649,13 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-indent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"