feat(ci): replace jest with vitest [EE-6504] (#10997)

app/react/azure/DashboardView/DashboardView.test.tsx

@@ -11,9 +11,9 @@ import {
 
 import { DashboardView } from './DashboardView';
 
-jest.mock('@uirouter/react', () => ({
-  ...jest.requireActual('@uirouter/react'),
-  useCurrentStateAndParams: jest.fn(() => ({
+vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
+  ...(await importOriginal()),
+  useCurrentStateAndParams: vi.fn(() => ({
     params: { endpointId: 1 },
   })),
 }));
@@ -73,7 +73,7 @@ test('should correctly show total number of resource groups across multiple subs
 });
 
 test("when only subscriptions fail to load, don't show the dashboard", async () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {});
+  vi.spyOn(console, 'error').mockImplementation(() => {});
 
   const { queryByLabelText } = await renderComponent(
     1,
@@ -86,7 +86,7 @@ test("when only subscriptions fail to load, don't show the dashboard", async ()
 });
 
 test('when only resource groups fail to load, still show the subscriptions', async () => {
-  jest.spyOn(console, 'error').mockImplementation(() => {});
+  vi.spyOn(console, 'error').mockImplementation(() => {});
 
   const { queryByLabelText, findByLabelText } = await renderComponent(
     1,

app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.test.tsx

@@ -6,9 +6,9 @@ import { renderWithQueryClient } from '@/react-tools/test-utils';
 
 import { CreateContainerInstanceForm } from './CreateContainerInstanceForm';
 
-jest.mock('@uirouter/react', () => ({
-  ...jest.requireActual('@uirouter/react'),
-  useCurrentStateAndParams: jest.fn(() => ({
+vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
+  ...(await importOriginal()),
+  useCurrentStateAndParams: vi.fn(() => ({
     params: { endpointId: 5 },
   })),
 }));

app/react/components/BoxSelector/BoxSelector.test.tsx

@@ -44,7 +44,7 @@ test('should render with the initial value selected and call onChange when click
     },
   ];
 
-  const onChange = jest.fn();
+  const onChange = vi.fn();
   const { getByLabelText } = renderDefault({
     options,
     onChange,

app/react/components/NavTabs/NavTabs.test.tsx

@@ -37,7 +37,7 @@ test('should call onSelect when clicked with id', async () => {
     { children: 'Content 2', id: 'option2', label: 'Option 2' },
   ];
 
-  const onSelect = jest.fn();
+  const onSelect = vi.fn();
 
   const { findByText } = renderComponent(options, options[1].id, onSelect);
 

app/react/components/PageHeader/HeaderTitle.test.tsx

@@ -6,9 +6,9 @@ import { HeaderContainer } from './HeaderContainer';
 import { HeaderTitle } from './HeaderTitle';
 
 test('should not render without a wrapping HeaderContainer', async () => {
-  const consoleErrorFn = jest
+  const consoleErrorFn = vi
     .spyOn(console, 'error')
-    .mockImplementation(() => jest.fn());
+    .mockImplementation(() => vi.fn());
 
   const title = 'title';
   function renderComponent() {

app/react/components/PageHeader/__snapshots__/HeaderTitle.test.tsx.snap

@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`should not render without a wrapping HeaderContainer 1`] = `"Should be nested inside a HeaderContainer component"`;
+exports[`should not render without a wrapping HeaderContainer 1`] = `[Error: Should be nested inside a HeaderContainer component]`;

app/react/components/TagSelector/TagSelector.test.tsx

@@ -1,4 +1,5 @@
 import { http, HttpResponse } from 'msw';
+import { Mock } from 'vitest';
 
 import { Tag, TagId } from '@/portainer/tags/types';
 import { renderWithQueryClient } from '@/react-tools/test-utils';
@@ -43,11 +44,11 @@ async function renderComponent(
   {
     value = [],
     allowCreate = false,
-    onChange = jest.fn(),
+    onChange = vi.fn(),
   }: {
     value?: TagId[];
     allowCreate?: boolean;
-    onChange?: jest.Mock;
+    onChange?: Mock;
   } = {},
   tags: Tag[] = []
 ) {

app/react/components/buttons/Button.test.tsx

@@ -26,7 +26,7 @@ function renderDefault({
 
 test('should display a Button component and allow onClick', async () => {
   const children = 'test label';
-  const onClick = jest.fn();
+  const onClick = vi.fn();
   const { findByText } = renderDefault({ children, onClick });
 
   const buttonLabel = await findByText(children);

app/react/components/buttons/CopyButton/CopyButton.test.tsx

@@ -15,7 +15,7 @@ test('should display a CopyButton with children', async () => {
 test('CopyButton should copy text to clipboard', async () => {
   // override navigator.clipboard.writeText (to test copy to clipboard functionality)
   let clipboardText = '';
-  const writeText = jest.fn((text) => {
+  const writeText = vi.fn((text) => {
     clipboardText = text;
   });
   Object.assign(navigator, {

app/react/components/form-components/FileUpload/FileUploadField.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, render } from '@/react-tools/test-utils';
 import { FileUploadField } from './FileUploadField';
 
 test('render should make the file button clickable and fire onChange event after click', async () => {
-  const onClick = jest.fn();
+  const onClick = vi.fn();
   const { findByText, findByLabelText } = render(
     <FileUploadField
       title="test button"

app/react/components/form-components/FileUpload/FileUploadForm.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@/react-tools/test-utils';
 import { FileUploadForm } from './FileUploadForm';
 
 test('render should include description', async () => {
-  const onClick = jest.fn();
+  const onClick = vi.fn();
   const { findByText } = render(
     <FileUploadForm
       title="test button"

app/react/components/form-components/SwitchField/SwitchField.test.tsx

@@ -6,7 +6,7 @@ function renderDefault({
   name = 'default name',
   checked = false,
   label = 'label',
-  onChange = jest.fn(),
+  onChange = vi.fn(),
   index,
 }: Partial<Props> = {}) {
   return render(
@@ -28,7 +28,7 @@ test('should display a Switch component', async () => {
 });
 
 test('clicking should emit on-change with the opposite value', async () => {
-  const onChange = jest.fn();
+  const onChange = vi.fn();
   const checked = true;
   const { findByRole } = renderDefault({ onChange, checked });
 
@@ -39,7 +39,7 @@ test('clicking should emit on-change with the opposite value', async () => {
 });
 
 test('clicking should emit on-change with the opposite value and index', async () => {
-  const onChange = jest.fn();
+  const onChange = vi.fn();
   const checked = true;
   const index = 3;
   const { findByRole } = renderDefault({ onChange, checked, index });

app/react/docker/networks/ItemView/NetworkContainersTable.test.tsx

@@ -18,9 +18,9 @@ const networkContainers: NetworkContainer[] = [
   },
 ];
 
-jest.mock('@uirouter/react', () => ({
-  ...jest.requireActual('@uirouter/react'),
-  useCurrentStateAndParams: jest.fn(() => ({
+vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
+  ...(await importOriginal()),
+  useCurrentStateAndParams: vi.fn(() => ({
     params: { endpointId: 1 },
   })),
 }));

app/react/docker/networks/ItemView/NetworkDetailsTable.test.tsx

@@ -6,9 +6,9 @@ import { DockerNetwork } from '../types';
 
 import { NetworkDetailsTable } from './NetworkDetailsTable';
 
-jest.mock('@uirouter/react', () => ({
-  ...jest.requireActual('@uirouter/react'),
-  useCurrentStateAndParams: jest.fn(() => ({
+vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
+  ...(await importOriginal()),
+  useCurrentStateAndParams: vi.fn(() => ({
     params: { endpointId: 1 },
   })),
 }));

app/react/edge/edge-stacks/utils.test.ts

@@ -32,7 +32,7 @@ describe('getValidEditorTypes', () => {
   ];
 
   tests.forEach((test) => {
-    // eslint-disable-next-line jest/valid-title
+    // eslint-disable-next-line vitest/valid-title
     it(test.title, () => {
       expect(getValidEditorTypes(test.endpointTypes)).toEqual(test.expected);
     });

app/react/kubernetes/applications/components/ApplicationSummarySection/utils.test.ts

@@ -431,7 +431,7 @@ describe('getCreateAppSummaries', () => {
     },
   ];
   tests.forEach((test) => {
-    // eslint-disable-next-line jest/valid-title
+    // eslint-disable-next-line vitest/valid-title
     it(test.title, () => {
       expect(
         getAppResourceSummaries(test.newFormValues, test.oldFormValues)
@@ -507,7 +507,7 @@ describe('getUpdateAppSummaries', () => {
     },
   ];
   tests.forEach((test) => {
-    // eslint-disable-next-line jest/valid-title
+    // eslint-disable-next-line vitest/valid-title
     it(test.title, () => {
       expect(
         getAppResourceSummaries(test.newFormValues, test.oldFormValues)

app/react/portainer/HomeView/EnvironmentList/EnvironmentList.test.tsx

@@ -51,7 +51,7 @@ async function renderComponent(
 
   const queries = renderWithQueryClient(
     <UserContext.Provider value={{ user }}>
-      <EnvironmentList onClickBrowse={jest.fn()} onRefresh={jest.fn()} />
+      <EnvironmentList onClickBrowse={vi.fn()} onRefresh={vi.fn()} />
     </UserContext.Provider>
   );
 

app/react/portainer/access-control/AccessControlForm/AccessControlForm.test.tsx

@@ -48,7 +48,7 @@ test.each([
   async (ownership) => {
     const values = buildFormData(ownership);
 
-    const { findByRole } = await renderComponent(values, jest.fn(), {
+    const { findByRole } = await renderComponent(values, vi.fn(), {
       isAdmin: true,
     });
 
@@ -76,7 +76,7 @@ test.each([
   async (ownership) => {
     const values = buildFormData(ownership);
 
-    const { findByRole } = await renderComponent(values, jest.fn(), {
+    const { findByRole } = await renderComponent(values, vi.fn(), {
       teams: [],
       isAdmin: false,
     });
@@ -99,7 +99,7 @@ test.each([
   async (ownership) => {
     const values = buildFormData(ownership);
 
-    const { findByRole } = await renderComponent(values, jest.fn(), {
+    const { findByRole } = await renderComponent(values, vi.fn(), {
       teams: createMockTeams(1),
       isAdmin: false,
     });
@@ -124,7 +124,7 @@ test('when ownership is public, ownership selector should be hidden', async () =
 test('when hideTitle is true, title should be hidden', async () => {
   const values = buildFormData();
 
-  const { queryByRole } = await renderComponent(values, jest.fn(), {
+  const { queryByRole } = await renderComponent(values, vi.fn(), {
     hideTitle: true,
   });
 
@@ -136,7 +136,7 @@ test('when isAdmin and admin ownership is selected, no extra options are visible
 
   const { findByRole, queryByLabelText } = await renderComponent(
     values,
-    jest.fn(),
+    vi.fn(),
     {
       isAdmin: true,
     }
@@ -162,7 +162,7 @@ test('when isAdmin and restricted ownership is selected, show team and users sel
 
   const { findByRole, findByLabelText } = await renderComponent(
     values,
-    jest.fn(),
+    vi.fn(),
     {
       isAdmin: true,
     }
@@ -200,7 +200,7 @@ test('when user is not an admin, there are more then 1 team and ownership is res
 
   const { findByRole, findByLabelText } = await renderComponent(
     values,
-    jest.fn()
+    vi.fn()
   );
 
   const ownershipSelector = await findByRole('radiogroup');
@@ -231,7 +231,7 @@ test('when user is not an admin, there is 1 team and ownership is restricted, te
 
   const { findByRole, findByLabelText } = await renderComponent(
     values,
-    jest.fn(),
+    vi.fn(),
     {
       teams: createMockTeams(1),
       isAdmin: false,
@@ -266,7 +266,7 @@ test('when user is not an admin, and ownership is restricted, user selector not
 
   const { findByRole, findByLabelText } = await renderComponent(
     values,
-    jest.fn(),
+    vi.fn(),
     {
       isAdmin: false,
     }
@@ -300,7 +300,7 @@ interface AdditionalProps {
 
 async function renderComponent(
   values: AccessControlFormData,
-  onChange = jest.fn(),
+  onChange = vi.fn(),
   { isAdmin = false, hideTitle = false, teams, users }: AdditionalProps = {}
 ) {
   const user = new UserViewModel({ Username: 'user', Role: isAdmin ? 1 : 2 });

app/react/portainer/access-control/AccessControlForm/__snapshots__/AccessControlForm.validation.test.ts.snap

@@ -1,5 +1,5 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`when ownership is restricted and no teams or users, should be invalid 1`] = `"You must specify at least one team or user."`;
+exports[`when ownership is restricted and no teams or users, should be invalid 1`] = `[ValidationError: You must specify at least one team or user.]`;
 
-exports[`when ownership is restricted and no teams or users, should be invalid 2`] = `"You must specify at least one team."`;
+exports[`when ownership is restricted and no teams or users, should be invalid 2`] = `[ValidationError: You must specify at least one team.]`;

app/react/portainer/licenses/license.service.test.ts

@@ -7,8 +7,8 @@ import type { License } from './types';
 
 describe('getLicenses', () => {
   it('on success should return the server body', async () => {
-    const catchFn = jest.fn();
-    const thenFn = jest.fn();
+    const catchFn = vi.fn();
+    const thenFn = vi.fn();
 
     const data: License[] = [];
     server.use(http.get('/api/licenses', () => HttpResponse.json(data)));
@@ -22,8 +22,8 @@ describe('getLicenses', () => {
   });
 
   it('on failure should return the server message', async () => {
-    const catchFn = jest.fn();
-    const thenFn = jest.fn();
+    const catchFn = vi.fn();
+    const thenFn = vi.fn();
 
     const message = 'message';
     const details = 'details';