vitest: jest --> vi

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 confirmationAction = vi.fn();
-        const secondaryAction = jest.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 confirmationAction = vi.fn();
-        const cancelAction = jest.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()}
+        onAddReaction={vi.fn()}
-        onRemoveReaction={jest.fn()}
+        onRemoveReaction={vi.fn()}
       />,
     );
 
@@ -25,8 +25,8 @@ describe('<ChatMessageReaction />', () => {
   });
 
   it('triggers the "onAddReaction" function', async () => {
-    const onAddFn = jest.fn();
+    const onAddFn = vi.fn();
-    const onRemoveFn = jest.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 onAddFn = vi.fn();
-    const onRemoveFn = jest.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/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 {