LITE-29964 migrate to use vitest

Author: paulinaczybir

.eslintrc.cjs

@@ -17,6 +17,7 @@ module.exports = {
     'plugin:storybook/recommended',
     'prettier',
     '@vue/eslint-config-prettier/skip-formatting',
+    'plugin:vitest-globals/recommended',
   ],
 
   plugins: ['vue'],
@@ -34,21 +35,15 @@ module.exports = {
     'vue/attribute-hyphenation': ['error', 'never'],
   },
 
-  overrides: [
-    // Config for unit tests
-    {
-      files: ['*.spec.js'],
-      plugins: ['jest'],
-      extends: ['plugin:jest/recommended', 'plugin:jest-formatting/strict'],
-      env: {
-        jest: true,
-        'jest/globals': true,
-      },
-      globals: {
-        global: 'writable',
-      },
-    },
+  env: {
+    'vitest-globals': true,
+  },
 
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+
+  overrides: [
     // Config for files that run in node env (config files, etc)
     {
       files: ['*.config.js', '.eslintrc.js'],

.gitignore

@@ -13,6 +13,8 @@ dist-ssr
 coverage
 *.local
 
+/test/report.json
+
 /cypress/videos/
 /cypress/screenshots/
 

components/jest.config.js

@@ -24,7 +24,7 @@ describe('Core', () => {
       [{ test: 123 }, null],
       [null, { test: 123 }],
     ])('should do nothing while $state is %j and data is %j', (state, data) => {
-      global.Object.keys = jest.fn(Object.keys);
+      global.Object.keys = vi.fn(Object.keys);
       core.state = state;
       core.assign(data);
 
@@ -53,7 +53,7 @@ describe('Core', () => {
       };
 
       core.watchers = {
-        test: [jest.fn()],
+        test: [vi.fn()],
       };
 
       core.assign({
@@ -71,7 +71,7 @@ describe('Core', () => {
       };
 
       core.watchers = {
-        '*': [jest.fn()],
+        '*': [vi.fn()],
       };
 
       core.assign({

components/src/core/injector/core/Core.spec.js

@@ -1,16 +1,16 @@
 import injectorFactory from './injectorFactory';
 import { processRoute } from '~core/router';
 
-jest.mock('~core/router', () => ({
-  processRoute: jest.fn().mockReturnValue('processRouteMockedReturnValue'),
+vi.mock('~core/router', () => ({
+  processRoute: vi.fn().mockReturnValue('processRouteMockedReturnValue'),
 }));
 
 describe('injectorFactory', () => {
   describe('#watch()', () => {
     it('should add callback as new watcher for passed property', () => {
       const core = { watchers: {}, state: { foo: 'bar' } };
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('foo', cb);
       core.watchers.foo[0]();
@@ -21,7 +21,7 @@ describe('injectorFactory', () => {
     it('should add immediate callback call', () => {
       const core = { watchers: {}, state: { foo: 'bar' } };
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('foo', cb, { immediate: true });
 
@@ -31,7 +31,7 @@ describe('injectorFactory', () => {
     it('should add immediate callback call with "*" key', () => {
       const core = { watchers: {}, state: { foo: 'bar' } };
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('*', cb, { immediate: true });
 
@@ -45,7 +45,7 @@ describe('injectorFactory', () => {
       };
 
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch('foo', cb);
       core.watchers.foo[1]();
@@ -60,7 +60,7 @@ describe('injectorFactory', () => {
       };
 
       const injector = injectorFactory(core);
-      const cb = jest.fn();
+      const cb = vi.fn();
 
       injector.watch(cb);
       core.watchers['*'][0]();
@@ -74,10 +74,10 @@ describe('injectorFactory', () => {
     let commit;
 
     beforeEach(() => {
-      global.window.top.postMessage = jest.fn();
+      global.window.top.postMessage = vi.fn();
 
       core = {
-        assign: jest.fn(),
+        assign: vi.fn(),
         id: 'XXX',
         state: {
           foo: 'bar',
@@ -124,7 +124,7 @@ describe('injectorFactory', () => {
 
   describe('#emit()', () => {
     beforeEach(() => {
-      global.window.top.postMessage = jest.fn();
+      global.window.top.postMessage = vi.fn();
     });
 
     it('should emit proper event', () => {
@@ -173,7 +173,7 @@ describe('injectorFactory', () => {
   describe('#listen()', () => {
     it('should put provided callback to proper listeners', () => {
       const core = { listeners: {} };
-      const cb = jest.fn();
+      const cb = vi.fn();
       injectorFactory(core).listen('foo', cb);
       core.listeners.foo();
 
@@ -187,7 +187,7 @@ describe('injectorFactory', () => {
 
     beforeEach(() => {
       injector = injectorFactory({});
-      injectorEmitSpy = jest.spyOn(injector, 'emit');
+      injectorEmitSpy = vi.spyOn(injector, 'emit');
     });
 
     it('calls processRoute with the given arguments', () => {

components/src/core/injector/core/injectorFactory.spec.js

@@ -1,7 +1,7 @@
 import launch from './launcher';
 
-const resizeObserverCtorSpy = jest.fn();
-const resizeObserverObserveSpy = jest.fn();
+const resizeObserverCtorSpy = vi.fn();
+const resizeObserverObserveSpy = vi.fn();
 const resizeObserverEntriesStub = [
   {
     contentRect: {
@@ -30,20 +30,18 @@ describe('$init', () => {
   let init;
 
   beforeEach(() => {
-    global.window.addEventListener = jest.fn();
+    global.window.addEventListener = vi.fn();
     global.window.name = 'XXX';
-    global.crypto = {
-      getRandomValues: jest.fn(() => ['abc']),
-    };
+    global.crypto.getRandomValues = vi.fn(() => ['abc']);
 
     injector = {
-      listen: jest.fn(),
-      emit: jest.fn(),
+      listen: vi.fn(),
+      emit: vi.fn(),
     };
 
     core = {
-      size: jest.fn(() => 'SIZE'),
-      assign: jest.fn(),
+      size: vi.fn(() => 'SIZE'),
+      assign: vi.fn(),
     };
 
     init = () => launch(injector, core);
@@ -163,7 +161,7 @@ describe('$init', () => {
         },
       };
 
-      core.listeners = { test: jest.fn() };
+      core.listeners = { test: vi.fn() };
       handler({ data });
 
       expect(core.listeners.test).toHaveBeenCalledWith('TEST', data);

components/src/core/injector/core/launcher.spec.js

@@ -4,19 +4,19 @@ import Core from './core/Core';
 import injectorFactory from './core/injectorFactory';
 import launcher from './core/launcher';
 
-jest.mock('./core/Core', () => ({
+vi.mock('./core/Core', () => ({
   __esModule: true,
-  default: jest.fn().mockImplementation(() => ({ core: 'CORE' })),
+  default: vi.fn().mockImplementation(() => ({ core: 'CORE' })),
 }));
 
-jest.mock('./core/injectorFactory', () => ({
+vi.mock('./core/injectorFactory', () => ({
   __esModule: true,
-  default: jest.fn(() => 'INJECTOR'),
+  default: vi.fn(() => 'INJECTOR'),
 }));
 
-jest.mock('./core/launcher', () => ({
+vi.mock('./core/launcher', () => ({
   __esModule: true,
-  default: jest.fn(() => Promise.resolve()),
+  default: vi.fn(() => Promise.resolve()),
 }));
 
 describe('createInjector', () => {

components/src/core/injector/index.spec.js

@@ -3,14 +3,14 @@ import createApp from './index';
 import injector from '~core/injector';
 import registerWidget from '~core/registerWidget';
 
-jest.mock('~core/injector', () => ({
+vi.mock('~core/injector', () => ({
   __esModule: true,
-  default: jest.fn(() => 'app'),
+  default: vi.fn(() => 'app'),
 }));
 
-jest.mock('~core/registerWidget', () => ({
+vi.mock('~core/registerWidget', () => ({
   __esModule: true,
-  default: jest.fn(),
+  default: vi.fn(),
 }));
 
 describe('#createApp function', () => {

components/src/index.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Button from './widget';
+import Button from './widget.vue';
 
 describe('Button widget', () => {
   let wrapper;

components/src/widgets/button/widget.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import ComplexTable from './widget';
+import ComplexTable from './widget.vue';
 import { nextTick } from 'vue';
 
 describe('ComplexTable widget', () => {

components/src/widgets/complexTable/widget.spec.js

@@ -1,4 +1,5 @@
-import Icon from './widget';
+import Icon from './widget.vue';
+import { googleSnowboardingBaseline } from '@cloudblueconnect/material-svg';
 
 describe('Icon', () => {
   let result;
@@ -12,9 +13,7 @@ describe('Icon', () => {
         );
         result = component.icon.value;
 
-        expect(result).toEqual(
-          '<svg>This replaces import of files from @cloudblueconnect/material-svg in .spec.js files to optimize the run time of all unit tests</svg>',
-        );
+        expect(result).toEqual(googleSnowboardingBaseline);
       });
     });
 

components/src/widgets/icon/widget.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Menu from './widget';
+import Menu from './widget.vue';
 
 describe('Menu component', () => {
   describe('methods', () => {
@@ -23,7 +23,7 @@ describe('Menu component', () => {
 
     describe('#handleClickOutside', () => {
       it('closes menu when clicked outside menu bounds', async () => {
-        const event = { composedPath: jest.fn().mockReturnValue(['slot', 'button']) };
+        const event = { composedPath: vi.fn().mockReturnValue(['slot', 'button']) };
         const wrapper = mount(Menu);
         wrapper.vm.menu = 'div';
         wrapper.vm.showMenu = true;
@@ -33,7 +33,7 @@ describe('Menu component', () => {
       });
 
       it('does not close menu when clicked inside menu bounds', async () => {
-        const event = { composedPath: jest.fn().mockReturnValue(['slot', 'button']) };
+        const event = { composedPath: vi.fn().mockReturnValue(['slot', 'button']) };
         const wrapper = mount(Menu);
         wrapper.vm.menu = 'button';
         wrapper.vm.showMenu = true;
@@ -67,7 +67,7 @@ describe('Menu component', () => {
 
   describe('onMounted', () => {
     it('adds up event listener on component mount', () => {
-      const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+      const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
 
       mount(Menu);
 
@@ -79,7 +79,7 @@ describe('Menu component', () => {
 
   describe('onUnmounted', () => {
     it('cleans up event listener on component unmount', async () => {
-      const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
 
       const wrapper = mount(Menu);
       await wrapper.unmount();