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

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