bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'vitest-fixes' into 'develop'

Browse source 
Vitest fixes

See merge request soapbox-pub/soapbox!2700
This commit is contained in:
Alex Gleason 2023-09-17 01:54:27 +00:00
commit 967bf8f30a
29 changed files with 161 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/__tests__/toast.test.tsx
View file

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

4
app/soapbox/actions/__tests__/compose.test.ts
View file

@ -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 = [

4
app/soapbox/actions/__tests__/me.test.ts
View file

@ -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({})),
},
}));

12
app/soapbox/actions/__tests__/onboarding.test.ts
View file

@ -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() => {

4
app/soapbox/components/ui/button/__tests__/button.test.tsx
View file

@ -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'));

8
app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx
View file

@ -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();

4
app/soapbox/components/ui/form/__tests__/form.test.tsx
View file

@ -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>,
);

12
app/soapbox/components/ui/modal/__tests__/modal.test.tsx
View file

@ -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(

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

@ -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));

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

@ -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);
});

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

@ -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(

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

@ -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'

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

@ -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(

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

@ -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,

2
app/soapbox/features/groups/__tests__/discover.test.tsx
View file

@ -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 }],
}));

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

@ -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} />);

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

@ -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();
// });

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

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

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

@ -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();
});

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

@ -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 />', () => {

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

@ -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();
});
});

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

@ -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();
});
});

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

@ -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/));

2
app/soapbox/hooks/__mocks__/resize-observer.ts
View file

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

22
app/soapbox/jest/test-setup.ts
View file

@ -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(),
})),
});

7
package.json
View file

@ -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",

7
tsconfig.json
View file

@ -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"
]
},

1
vite.config.ts
View file

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

70
yarn.lock
View file

@ -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"