@evoke-platform/ui-components 1.2.0 → 1.2.1-testing.1

package/dist/published/components/core/Autocomplete/Autocomplete.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+export {};

package/dist/published/components/core/Autocomplete/Autocomplete.test.js

@@ -1,11 +1,11 @@
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { it } from 'vitest';
 import TextField from '../TextField';
 import Autocomplete from './Autocomplete';
 const renderInput = (params) => React.createElement(TextField, { ...params });
 const options = [];
-test('renders with label outside outline', () => {
+it('renders with label outside outline', () => {
     render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
     screen.getByRole('combobox', { name: 'Title' });
 });

package/dist/published/components/core/TextField/TextField.test.d.ts

@@ -1 +1,5 @@
-import '@testing-library/jest-dom/extend-expect';
+import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+declare module 'vitest' {
+    interface JestAssertion<T> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {
+    }
+}

package/dist/published/components/core/TextField/TextField.test.js

@@ -1,18 +1,20 @@
-import '@testing-library/jest-dom/extend-expect';
+import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { expect, it } from 'vitest';
 import TextField from './index';
-test('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
+expect.extend(matchers);
+it('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
     render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
     const textField = screen.getByRole('textbox', { name: 'Title' });
     expect(textField).toHaveAttribute('data-testid', 'label-outside');
 });
-test('render TextField and check for data-testid === label-inside when labelPlacement === outside-top && variant !== outlined using data-testid', () => {
+it('render TextField and check for data-testid === label-inside when labelPlacement === outside-top && variant !== outlined using data-testid', () => {
     render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", label: "Title2" }));
     const textField = screen.getByRole('textbox', { name: 'Title2' });
     expect(textField).toHaveAttribute('data-testid', 'label-inside');
 });
-test('render TextField and check for data-testid === label-inside when labelPlacement === undefined', () => {
+it('render TextField and check for data-testid === label-inside when labelPlacement === undefined', () => {
     render(React.createElement(TextField, { id: "testinput", label: "Title3" }));
     const textField = screen.getByRole('textbox', { name: 'Title3' });
     expect(textField).toHaveAttribute('data-testid', 'label-inside');

package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+export {};

package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.js

@@ -1,7 +1,7 @@
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { expect, it, vi } from 'vitest';
 import AddressFieldComponent from './addressFieldComponent';
 // Right now an object property is required for this to function, but eventually this should go
 // away.
@@ -10,7 +10,7 @@ const addressProperty = {
     name: 'Line 1',
     type: 'text',
 };
-test('displays matching addresses', async () => {
+it('displays matching addresses', async () => {
     const user = userEvent.setup();
     const queryAddresses = async (search) => [
         {
@@ -38,18 +38,18 @@ test('displays matching addresses', async () => {
     await screen.findByRole('menuitem', { name: /1234 Main Street/ });
     await screen.findByRole('menuitem', { name: /12345 Main Avenue/ });
 });
-test('returns manually typed address', async () => {
+it('returns manually typed address', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property, unused) => { });
+    const onChangeMock = vi.fn((name, value, property, unused) => { });
     render(React.createElement(AddressFieldComponent, { id: "addressSearch", property: addressProperty, onChange: onChangeMock }));
     const addressField = screen.getByRole('searchbox');
     await user.type(addressField, '1234 Main St');
     expect(onChangeMock).toBeCalledTimes(12);
     expect(onChangeMock).lastCalledWith('addressLine1', '1234 Main St', addressProperty, undefined);
 });
-test('returns selected search result', async () => {
+it('returns selected search result', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property, unused) => { });
+    const onChangeMock = vi.fn((name, value, property, unused) => { });
     const queryAddresses = async (search) => [
         {
             address: {

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -48,7 +48,7 @@ const AddressFieldComponent = (props) => {
         !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
-            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (inputProps) => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',
@@ -58,7 +58,7 @@ const AddressFieldComponent = (props) => {
                         backgroundColor: '#f4f6f8',
                     },
                 }
-                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, value: value, ...(additionalProps ?? {}) })))),
+                : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...inputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? rows ?? 3 : undefined, value: value, ...(additionalProps ?? {}) })))),
         !readOnly && (React.createElement(Popover, { id: popoverId, open: open, anchorEl: anchorEl, onClose: handleClose, disableAutoFocus: true, marginThreshold: undefined, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'left',

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+export {};

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.test.js

@@ -1,7 +1,7 @@
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { expect, it } from 'vitest';
 import BooleanSelect from './BooleanSelect';
 // Right now an object property is required for this to function, but eventually this should go
 // away.
@@ -10,9 +10,9 @@ const booleanProperty = {
     name: 'Question',
     type: 'boolean',
 };
-test('returns selected option', async () => {
+it('returns selected option', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(BooleanSelect, { id: "chooseYesOrNo", property: booleanProperty, onChange: onChangeMock }));
     const inputField = screen.getByRole('combobox');
     await user.click(inputField);

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+export {};

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.test.js

@@ -1,8 +1,8 @@
 import { LocalDate, Month } from '@js-joda/core';
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { expect, it, vi } from 'vitest';
 import { InvalidDate } from '../../../../util';
 import DatePickerSelect from './DatePickerSelect';
 // Right now an object property is required for this to function, but eventually this should go
@@ -14,28 +14,19 @@ const dateProperty = {
 };
 beforeAll(() => {
     // Set specific date for a repeatable test.
-    jest.useFakeTimers({
+    vi.useFakeTimers({
         now: new Date('2024-02-11'),
         // Only want to set current time, don't override timer functions as that will
         // confuse @testing-library.
-        doNotFake: [
-            'setImmediate',
-            'clearImmediate',
-            'setTimeout',
-            'clearTimeout',
-            'setInterval',
-            'clearInterval',
-            'nextTick',
-            'queueMicrotask',
-        ],
+        toFake: ['Date'],
     });
 });
 afterAll(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
 });
-test('returns selected date', async () => {
+it('returns selected date', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
     const calendarIcon = screen.getByRole('button', { name: /Choose date/i });
     await user.click(calendarIcon);
@@ -44,18 +35,18 @@ test('returns selected date', async () => {
     await user.click(feb29);
     expect(onChangeMock).toBeCalledWith('testDate', LocalDate.of(2024, Month.FEBRUARY, 29), dateProperty);
 }, 10000);
-test('returns manually entered date', async () => {
+it('returns manually entered date', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
     const input = screen.getByRole('textbox');
     await user.type(input, '03/27/2024');
     expect(onChangeMock).toBeCalledTimes(8); // component ignores '/', i.e. input could also have been '03272024'
     expect(onChangeMock).lastCalledWith('testDate', LocalDate.of(2024, Month.MARCH, 27), dateProperty);
 });
-test('returns incomplete dates', async () => {
+it('returns incomplete dates', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(DatePickerSelect, { id: "pickDate", property: dateProperty, onChange: onChangeMock }));
     const input = screen.getByRole('textbox');
     await user.type(input, '08/20');

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+export {};

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.js

@@ -1,8 +1,8 @@
 import { LocalDateTime, Month } from '@js-joda/core';
-import '@testing-library/jest-dom/extend-expect';
 import { render, screen, within } from '@testing-library/react';
 import { PointerEventsCheckLevel, userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { afterAll, beforeAll, expect, it, vi } from 'vitest';
 import { InvalidDate } from '../../../../util';
 import DateTimePickerSelect from './DateTimePickerSelect';
 // Right now an object property is required for this to function, but eventually this should go
@@ -14,28 +14,19 @@ const dateTimeProperty = {
 };
 beforeAll(() => {
     // Set specific date for a repeatable test.
-    jest.useFakeTimers({
+    vi.useFakeTimers({
         now: new Date('2024-02-11T05:25:25'),
         // Only want to set current time, don't override timer functions as that will
         // confuse @testing-library.
-        doNotFake: [
-            'setImmediate',
-            'clearImmediate',
-            'setTimeout',
-            'clearTimeout',
-            'setInterval',
-            'clearInterval',
-            'nextTick',
-            'queueMicrotask',
-        ],
+        toFake: ['Date'],
     });
 });
 afterAll(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
 });
-test('returns selected date time', async () => {
+it('returns selected date time', async () => {
     const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
     const calendarIcon = screen.getByRole('button', { name: /Choose date/i });
     await user.click(calendarIcon);
@@ -48,9 +39,9 @@ test('returns selected date time', async () => {
     // All it can do is check the date picker part works.
     expect(onChangeMock).toBeCalledWith('testDateTime', LocalDateTime.of(2024, Month.FEBRUARY, 29, 0, 0, 0), dateTimeProperty);
 }, 10000);
-test('returns manually entered date time', async () => {
+it('returns manually entered date time', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
     const input = screen.getByRole('textbox');
     await user.type(input, '03/27/2024 09:25 AM');
@@ -60,9 +51,9 @@ test('returns manually entered date time', async () => {
     expect(onChangeMock).toBeCalledTimes(13);
     expect(onChangeMock).lastCalledWith('testDateTime', LocalDateTime.of(2024, Month.MARCH, 27, 9, 25), dateTimeProperty);
 });
-test('returns incomplete date times', async () => {
+it('returns incomplete date times', async () => {
     const user = userEvent.setup();
-    const onChangeMock = jest.fn((name, value, property) => { });
+    const onChangeMock = vi.fn((name, value, property) => { });
     render(React.createElement(DateTimePickerSelect, { id: "pickDateTime", property: dateTimeProperty, onChange: onChangeMock }));
     const input = screen.getByRole('textbox');
     await user.type(input, '08/20');

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -1,3 +1,4 @@
+import { SelectOption } from '@evoke-platform/context';
 import React, { FocusEventHandler, ReactNode } from 'react';
 import { ObjectProperty } from '../../../types';
 import { AutocompleteOption } from '../../core';
@@ -14,7 +15,7 @@ export type FormFieldProps = {
     readOnly?: boolean;
     min?: number;
     max?: number;
-    selectOptions?: Array<string>;
+    selectOptions?: SelectOption[] | Array<string>;
     locale?: string;
     size?: 'small' | 'medium';
     placeholder?: string;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -62,7 +62,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
-        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, disabled: false, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (inputProps) => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
@@ -72,6 +72,6 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) }))));
+            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...inputProps, ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) }))));
 };
 export default InputFieldComponent;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.d.ts

@@ -1 +1,5 @@
-import '@testing-library/jest-dom/extend-expect';
+import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+declare module 'vitest' {
+    interface JestAssertion<T> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {
+    }
+}

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js

@@ -1,8 +1,10 @@
-import '@testing-library/jest-dom/extend-expect';
+import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import InputField from './InputFieldComponent';
+expect.extend(matchers);
 describe('Free-text input', () => {
     // Right now an object property is required for this to function, but eventually this should go
     // away.
@@ -11,9 +13,9 @@ describe('Free-text input', () => {
         name: 'Input Field',
         type: 'string',
     };
-    test('returns entered value', async () => {
+    it('returns entered value', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         render(React.createElement(InputField, { id: "testInput", property: textProperty, onChange: onChangeMock }));
         const input = screen.getByRole('textbox');
         await user.type(input, 'test value');
@@ -30,9 +32,9 @@ describe('Autocomplete', () => {
         type: 'string',
         enum: ['option 1', 'option 2'],
     };
-    test('returns selected value', async () => {
+    it('returns selected value', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
         await user.click(input);
@@ -40,18 +42,18 @@ describe('Autocomplete', () => {
         await user.click(option2);
         expect(onChangeMock).toBeCalledWith('enumField', 'option 2', enumProperty);
     });
-    test('does not include blank default value in options', async () => {
+    it('does not include blank default value in options', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: null }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         const blankOption = screen.queryByRole('option', { name: '' });
         expect(blankOption).not.toBeInTheDocument();
     });
-    test('includes default value in options', async () => {
+    it('includes default value in options', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         render(React.createElement(InputField, { id: "testInput", property: enumProperty, onChange: onChangeMock, defaultValue: 'Default' }));
         const input = screen.getByRole('combobox');
         await user.click(input);

package/dist/published/components/custom/FormField/Select/Select.test.d.ts

@@ -1 +1,5 @@
-import '@testing-library/jest-dom/extend-expect';
+import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+declare module 'vitest' {
+    interface JestAssertion<T> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {
+    }
+}

package/dist/published/components/custom/FormField/Select/Select.test.js

@@ -1,8 +1,10 @@
-import '@testing-library/jest-dom/extend-expect';
+import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import Select from './Select';
+expect.extend(matchers);
 describe('Single select', () => {
     // Right now an object property is required for this to function, but eventually this should go
     // away.
@@ -11,9 +13,9 @@ describe('Single select', () => {
         name: 'Select Options',
         type: 'choices',
     };
-    test('returns selected option', async () => {
+    it('returns selected option', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
         render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
@@ -22,7 +24,7 @@ describe('Single select', () => {
         await user.click(option2);
         expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), choiceProperty);
     });
-    test('displays matching options', async () => {
+    it('displays matching options', async () => {
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'something different'];
         render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: () => { } }));
@@ -38,7 +40,7 @@ describe('Single select', () => {
         { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
     ])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
         const options = ['option 2', 'option 1', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: jest.fn() }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: vi.fn() }));
         const user = userEvent.setup();
         const input = screen.getByRole('combobox');
         await user.click(input);
@@ -55,9 +57,9 @@ describe('Multi select', () => {
         name: 'Select Multiple',
         type: 'array',
     };
-    test('returns selected options', async () => {
+    it('returns selected options', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
         render(React.createElement(Select, { id: "testSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
@@ -79,7 +81,7 @@ describe('Radio Single select', () => {
     };
     test('returns selected radio option', async () => {
         const user = userEvent.setup();
-        const onChangeMock = jest.fn((name, value, property) => { });
+        const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
         render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock }));
         const option2 = await screen.findByRole('radio', { name: 'option 2' });
@@ -92,7 +94,7 @@ describe('Radio Single select', () => {
         { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
     ])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
         const options = ['option 2', 'option 1', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: jest.fn() }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: vi.fn() }));
         const radioButtons = screen.getAllByRole('radio');
         const radioValues = radioButtons.map((radioButton) => radioButton.value);
         expect(radioValues).toEqual(expectedValues);

package/dist/published/components/custom/Menubar/Menubar.test.js

@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { expect, it } from 'vitest';
 import { Link } from '../../core';
 import Menubar from './index';
-test('render Menubar component without crashing', () => {
+it('render Menubar component without crashing', () => {
     const navItems = (React.createElement(React.Fragment, null,
         React.createElement(Link, { href: "#" }, "Object1"),
         React.createElement(Link, { href: "#" }, "Object2"),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.2.0",
+    "version": "1.2.1-testing.1",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -15,7 +15,8 @@
         "./icons": "./dist/published/icons/index.js"
     },
     "scripts": {
-        "test": "jest",
+        "test": "vitest",
+        "test:ui": "vitest --ui",
         "copy-styles": "copyfiles -u 1 src/styles/*.css dist/published/",
         "build": "rm -rf ./dist && tsc && npm run copy-styles",
         "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
@@ -47,21 +48,22 @@
         "@storybook/manager-webpack5": "^6.5.8",
         "@storybook/react": "^6.5.8",
         "@storybook/testing-library": "^0.0.11",
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.3.0",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.2",
         "@testing-library/user-event": "^14.5.2",
         "@types/dot-object": "^2.1.6",
         "@types/flat": "^5.0.5",
         "@types/jest": "^28.1.4",
         "@types/luxon": "^3.4.2",
         "@types/nanoid-dictionary": "^4.2.3",
-        "@types/node": "^17.0.41",
+        "@types/node": "^18.0.0",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.5",
-        "@types/react-input-mask": "^3.0.2",
+        "@types/react-input-mask": "^3.0.6",
         "@typescript-eslint/eslint-plugin": "^5.52.0",
         "@typescript-eslint/parser": "^5.35.1",
         "@typescript-eslint/typescript-estree": "^5.35.1",
+        "@vitest/ui": "^1.6.0",
         "babel-jest": "^28.1.2",
         "babel-loader": "^8.2.5",
         "copyfiles": "^2.4.1",
@@ -73,14 +75,13 @@
         "eslint-plugin-testing-library": "^6.2.0",
         "husky": "^8.0.3",
         "is-ci": "^3.0.1",
-        "jest": "^28.1.2",
-        "jest-environment-jsdom": "^28.1.2",
         "lint-staged": "^13.0.1",
         "prettier": "^3.0.0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "rimraf": "^3.0.2",
         "typescript": "^4.7.3",
+        "vitest": "^1.5.3",
         "webpack": "^5.74.0"
     },
     "peerDependencies": {
@@ -122,7 +123,7 @@
         "pluralize": "^8.0.0",
         "pretty-bytes": "^6.1.1",
         "react-dropzone": "^14.2.2",
-        "react-input-mask": "3.0.0-alpha.2",
+        "react-input-mask": "^2.0.4",
         "react-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2",
         "rtf.js": "^3.0.9",
@@ -134,13 +135,5 @@
         "*.{js,jsx,ts,tsx,json,css,md}": [
             "npm run lint:fix"
         ]
-    },
-    "jest": {
-        "verbose": true,
-        "testEnvironment": "jsdom",
-        "testPathIgnorePatterns": [
-            "/node_modules/",
-            "<rootDir>/dist/"
-        ]
     }
 }