feat: Use vitest instead of jest, run all the specs anywhere in app/ folder in the CI (#9722)

Due to the pattern `**/specs/*.spec.js` defined in CircleCI, none of the frontend spec in the folders such as `specs/<domain-name>/getters.spec.js` were not executed in Circle CI. This PR fixes the issue, along with the following changes: - Use vitest instead of jest - Remove jest dependancies - Update tests to work with vitest --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2025-11-01 03:27:52 +00:00 · 2024-07-10 08:32:16 -07:00
parent 9498d1f003
commit 9de8c27368
140 changed files with 1678 additions and 2810 deletions
--- a/app/javascript/widget/api/specs/endPoints.spec.js
+++ b/app/javascript/widget/api/specs/endPoints.spec.js
@@ -2,22 +2,21 @@ import endPoints from '../endPoints';

 describe('#sendMessage', () => {
  it('returns correct payload', () => {
-    const spy = jest.spyOn(global, 'Date').mockImplementation(() => ({
+    const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
      toString: () => 'mock date',
    }));
-    const windowSpy = jest.spyOn(window, 'window', 'get');
-    windowSpy.mockImplementation(() => ({
-      WOOT_WIDGET: {
-        $root: {
-          $i18n: {
-            locale: 'ar',
-          },
+    vi.spyOn(window, 'location', 'get').mockReturnValue({
+      ...window.location,
+      search: '?param=1',
+    });
+
+    window.WOOT_WIDGET = {
+      $root: {
+        $i18n: {
+          locale: 'ar',
        },
      },
-      location: {
-        search: '?param=1',
-      },
-    }));
+    };

    expect(endPoints.sendMessage('hello')).toEqual({
      url: `/api/v1/widget/messages?param=1&locale=ar`,
@@ -29,13 +28,16 @@ describe('#sendMessage', () => {
        },
      },
    });
-    windowSpy.mockRestore();
    spy.mockRestore();
  });
 });

 describe('#getConversation', () => {
  it('returns correct payload', () => {
+    vi.spyOn(window, 'location', 'get').mockReturnValue({
+      ...window.location,
+      search: '',
+    });
    expect(endPoints.getConversation({ before: 123 })).toEqual({
      url: `/api/v1/widget/messages`,
      params: {
@@ -47,10 +49,13 @@ describe('#getConversation', () => {

 describe('#triggerCampaign', () => {
  it('should returns correct payload', () => {
-    const spy = jest.spyOn(global, 'Date').mockImplementation(() => ({
+    const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
      toString: () => 'mock date',
    }));
-    const windowSpy = jest.spyOn(window, 'window', 'get');
+    vi.spyOn(window, 'location', 'get').mockReturnValue({
+      ...window.location,
+      search: '',
+    });
    const websiteToken = 'ADSDJ2323MSDSDFMMMASDM';
    const campaignId = 12;
    expect(
@@ -74,7 +79,6 @@ describe('#triggerCampaign', () => {
        website_token: websiteToken,
      },
    });
-    windowSpy.mockRestore();

    spy.mockRestore();
  });
@@ -82,10 +86,13 @@ describe('#triggerCampaign', () => {

 describe('#getConversation', () => {
  it('should returns correct payload', () => {
-    const spy = jest.spyOn(global, 'Date').mockImplementation(() => ({
+    const spy = vi.spyOn(global, 'Date').mockImplementation(() => ({
      toString: () => 'mock date',
    }));
-    const windowSpy = jest.spyOn(window, 'window', 'get');
+    vi.spyOn(window, 'location', 'get').mockReturnValue({
+      ...window.location,
+      search: '',
+    });
    expect(
      endPoints.getConversation({
        after: 123,
@@ -97,7 +104,6 @@ describe('#getConversation', () => {
        before: undefined,
      },
    });
-    windowSpy.mockRestore();

    spy.mockRestore();
  });
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -57,7 +57,7 @@ import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';

-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');

 export default {
  name: 'ChatInputWrap',
--- a/app/javascript/widget/helpers/specs/urlParamsHelper.spec.js
+++ b/app/javascript/widget/helpers/specs/urlParamsHelper.spec.js
@@ -6,7 +6,7 @@ import {

 describe('#buildSearchParamsWithLocale', () => {
  it('returns correct search params', () => {
-    let windowSpy = jest.spyOn(window, 'window', 'get');
+    let windowSpy = vi.spyOn(window, 'window', 'get');
    windowSpy.mockImplementation(() => ({
      WOOT_WIDGET: {
        $root: {
--- a/app/javascript/widget/helpers/specs/utils.spec.js
+++ b/app/javascript/widget/helpers/specs/utils.spec.js
@@ -1,6 +1,6 @@
 import { IFrameHelper } from '../utils';

-jest.mock('vue', () => ({
+vi.mock('vue', () => ({
  config: {
    lang: 'el',
  },
--- a/app/javascript/widget/mixins/specs/availabilityMixin.spec.js
+++ b/app/javascript/widget/mixins/specs/availabilityMixin.spec.js
@@ -29,7 +29,7 @@ global.chatwootWebChannel = {

 describe('availabilityMixin', () => {
  beforeEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
  });

  it('returns valid isInBetweenWorkingHours if in different timezone', () => {
@@ -37,9 +37,9 @@ describe('availabilityMixin', () => {
      render() {},
      mixins: [availabilityMixin],
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 06:04:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 06:04:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
    const wrapper = createWrapper(vm);
@@ -52,9 +52,9 @@ describe('availabilityMixin', () => {
      render() {},
      mixins: [availabilityMixin],
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 09:01:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 09:01:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const wrapper = createWrapper(new Constructor().$mount());
    expect(wrapper.vm.isInBetweenTheWorkingHours).toBe(true);
@@ -69,9 +69,9 @@ describe('availabilityMixin', () => {
    global.chatwootWebChannel.workingHours = [
      { day_of_week: 3, closed_all_day: true },
    ];
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 09:01:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 09:01:46 GMT+0530')
+    );

    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -88,9 +88,9 @@ describe('availabilityMixin', () => {
    global.chatwootWebChannel.workingHours = [
      { day_of_week: 3, open_all_day: true },
    ];
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 09:01:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 09:01:46 GMT+0530')
+    );

    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
--- a/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js
+++ b/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js
@@ -1,7 +1,25 @@
 import { createWrapper } from '@vue/test-utils';
 import nextAvailabilityTimeMixin from '../nextAvailabilityTime';
 import Vue from 'vue';
+import VueI18n from 'vue-i18n';

+Vue.use(VueI18n);
+const i18n = new VueI18n({
+  locale: 'en',
+  messages: {
+    en: {
+      DAY_NAMES: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+      ],
+    },
+  },
+});
 describe('nextAvailabilityTimeMixin', () => {
  const chatwootWebChannel = {
    workingHoursEnabled: true,
@@ -58,22 +76,23 @@ describe('nextAvailabilityTimeMixin', () => {
    ],
  };

-  beforeAll(() => {
+  beforeEach(() => {
    window.chatwootWebChannel = chatwootWebChannel;
  });

-  afterAll(() => {
+  afterEach(() => {
    delete window.chatwootWebChannel;
  });

  beforeEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
  });

  it('should return day names', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -102,6 +121,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -113,6 +133,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -124,6 +145,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const currentDay = new Date().getDay();
    const expectedWorkingHours = chatwootWebChannel.workingHours.find(
@@ -148,6 +170,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const currentDay = new Date().getDay();
    const nextDay = currentDay === 6 ? 0 : currentDay + 1;
@@ -173,6 +196,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -184,6 +208,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -204,6 +229,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -229,6 +255,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -258,6 +285,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -284,6 +312,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -312,6 +341,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -334,6 +364,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -372,6 +403,7 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
@@ -383,10 +415,11 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 23:04:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
    const wrapper = createWrapper(vm);
@@ -417,10 +450,11 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 23:04:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
    const wrapper = createWrapper(vm);
@@ -448,10 +482,11 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 23:04:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
    const wrapper = createWrapper(vm);
@@ -479,10 +514,11 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 23:04:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
    const wrapper = createWrapper(vm);
@@ -511,10 +547,11 @@ describe('nextAvailabilityTimeMixin', () => {
    const Component = {
      render() {},
      mixins: [nextAvailabilityTimeMixin],
+      i18n,
    };
-    jest
-      .useFakeTimers('modern')
-      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    vi.useFakeTimers('modern').setSystemTime(
+      new Date('Thu Apr 14 2022 23:04:46 GMT+0530')
+    );
    const Constructor = Vue.extend(Component);
    const vm = new Constructor().$mount();
    const wrapper = createWrapper(vm);
--- a/app/javascript/widget/store/modules/specs/agent/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/agent/actions.spec.js
@@ -2,8 +2,8 @@ import { API } from 'widget/helpers/axios';
 import { actions } from '../../agent';
 import { agents } from './data';

-const commit = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+vi.mock('widget/helpers/axios');

 describe('#actions', () => {
  describe('#fetchAvailableAgents', () => {
@@ -27,7 +27,9 @@ describe('#actions', () => {
  });

  describe('#updatePresence', () => {
-    actions.updatePresence({ commit }, { 1: 'online' });
-    expect(commit.mock.calls).toEqual([['updatePresence', { 1: 'online' }]]);
+    it('commits the correct presence value', () => {
+      actions.updatePresence({ commit }, { 1: 'online' });
+      expect(commit.mock.calls).toEqual([['updatePresence', { 1: 'online' }]]);
+    });
  });
 });
--- a/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
@@ -1,6 +1,6 @@
 import { actions } from '../../appConfig';

-const commit = jest.fn();
+const commit = vi.fn();
 describe('#actions', () => {
  describe('#setReferrerHost', () => {
    it('creates actions properly', () => {
--- a/app/javascript/widget/store/modules/specs/article/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/article/actions.spec.js
@@ -1,7 +1,7 @@
 import { mutations, actions, getters } from '../../articles'; // update this import path to your actual module location
 import { getMostReadArticles } from 'widget/api/article';

-jest.mock('widget/api/article');
+vi.mock('widget/api/article');

 describe('Vuex Articles Module', () => {
  let state;
@@ -57,7 +57,7 @@ describe('Vuex Articles Module', () => {

  describe('Actions', () => {
    it('fetches articles correctly', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
      const articles = [{ id: 1 }, { id: 2 }];
      getMostReadArticles.mockResolvedValueOnce({
        data: { payload: articles },
@@ -72,7 +72,7 @@ describe('Vuex Articles Module', () => {
    });

    it('handles fetch error correctly', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
      getMostReadArticles.mockRejectedValueOnce(new Error('Error message'));

      await actions.fetch(
@@ -86,7 +86,7 @@ describe('Vuex Articles Module', () => {
    });

    it('does not mutate state when fetching returns an empty payload', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
      getMostReadArticles.mockResolvedValueOnce({ data: { payload: [] } });

      await actions.fetch({ commit }, { slug: 'slug', locale: 'en' });
@@ -98,7 +98,7 @@ describe('Vuex Articles Module', () => {
    });

    it('sets error state when fetching fails', async () => {
-      const commit = jest.fn();
+      const commit = vi.fn();
      getMostReadArticles.mockRejectedValueOnce(new Error('Network error'));

      await actions.fetch(
--- a/app/javascript/widget/store/modules/specs/campaign/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/campaign/actions.spec.js
@@ -2,12 +2,16 @@ import { API } from 'widget/helpers/axios';
 import { actions } from '../../campaign';
 import { campaigns } from './data';

-const commit = jest.fn();
-const dispatch = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+const dispatch = vi.fn();
+vi.mock('widget/helpers/axios');

 import campaignTimer from 'widget/helpers/campaignTimer';
-jest.mock('widget/helpers/campaignTimer');
+vi.mock('widget/helpers/campaignTimer', () => ({
+  default: {
+    initTimers: vi.fn().mockReturnValue({ mock: true }),
+  },
+}));

 describe('#actions', () => {
  describe('#fetchCampaigns', () => {
--- a/app/javascript/widget/store/modules/specs/campaign/getters.spec.js
+++ b/app/javascript/widget/store/modules/specs/campaign/getters.spec.js
@@ -1,7 +1,8 @@
 import { getters } from '../../campaign';
 import { campaigns } from './data';
-jest.mock('widget/store/index.js');
-
+vi.mock('widget/store/index.js', () => ({
+  default: {},
+}));
 describe('#getters', () => {
  it('getCampaigns', () => {
    const state = {
--- a/app/javascript/widget/store/modules/specs/campaign/mutations.spec.js
+++ b/app/javascript/widget/store/modules/specs/campaign/mutations.spec.js
@@ -1,6 +1,9 @@
 import { mutations } from '../../campaign';
 import { campaigns } from './data';
-jest.mock('widget/store/index.js');
+vi.mock('widget/store/index.js', () => ({
+  default: {},
+}));
+
 describe('#mutations', () => {
  describe('#setCampaigns', () => {
    it('set campaign records', () => {
--- a/app/javascript/widget/store/modules/specs/contact/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/contact/actions.spec.js
@@ -1,11 +1,13 @@
 import { API } from 'widget/helpers/axios';
 import { sendMessage } from 'widget/helpers/utils';
 import { actions } from '../../contacts';
-const commit = jest.fn();
-const dispatch = jest.fn();
-jest.mock('widget/helpers/axios');
-jest.mock('widget/helpers/utils', () => ({
-  sendMessage: jest.fn(),
+
+const commit = vi.fn();
+const dispatch = vi.fn();
+
+vi.mock('widget/helpers/axios');
+vi.mock('widget/helpers/utils', () => ({
+  sendMessage: vi.fn(),
 }));

 describe('#actions', () => {
@@ -16,7 +18,9 @@ describe('#actions', () => {
        name: 'Adu Thoma',
        avatar_url: '',
      };
-      API.patch.mockResolvedValue({ data: { widget_auth_token: 'token' } });
+      vi.spyOn(API, 'patch').mockResolvedValue({
+        data: { widget_auth_token: 'token' },
+      });
      await actions.setUser({ commit, dispatch }, { identifier: 1, user });
      expect(sendMessage.mock.calls).toEqual([
        [{ data: { widgetAuthToken: 'token' }, event: 'setAuthCookie' }],
@@ -37,7 +41,7 @@ describe('#actions', () => {
        avatar_url: '',
        identifier_hash: '12345',
      };
-      API.patch.mockResolvedValue({ data: { id: 1 } });
+      vi.spyOn(API, 'patch').mockResolvedValue({ data: { id: 1 } });
      await actions.setUser({ commit, dispatch }, { identifier: 1, user });
      expect(sendMessage.mock.calls).toEqual([]);
      expect(commit.mock.calls).toEqual([]);
--- a/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/conversation/actions.spec.js
@@ -2,11 +2,11 @@ import { actions } from '../../conversation/actions';
 import getUuid from '../../../../helpers/uuid';
 import { API } from 'widget/helpers/axios';

-jest.mock('../../../../helpers/uuid');
-jest.mock('widget/helpers/axios');
+vi.mock('../../../../helpers/uuid');
+vi.mock('widget/helpers/axios');

-const commit = jest.fn();
-const dispatch = jest.fn();
+const commit = vi.fn();
+const dispatch = vi.fn();

 describe('#actions', () => {
  describe('#createConversation', () => {
@@ -17,7 +17,7 @@ describe('#actions', () => {
          messages: [{ id: 1, content: 'This is a test message' }],
        },
      });
-      let windowSpy = jest.spyOn(window, 'window', 'get');
+      let windowSpy = vi.spyOn(window, 'window', 'get');
      windowSpy.mockImplementation(() => ({
        WOOT_WIDGET: {
          $root: {
@@ -96,8 +96,8 @@ describe('#actions', () => {
    it('sends correct mutations', async () => {
      const mockDate = new Date(1466424490000);
      getUuid.mockImplementationOnce(() => '1111');
-      const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
-      const windowSpy = jest.spyOn(window, 'window', 'get');
+      const spy = vi.spyOn(global, 'Date').mockImplementation(() => mockDate);
+      const windowSpy = vi.spyOn(window, 'window', 'get');
      windowSpy.mockImplementation(() => ({
        WOOT_WIDGET: {
          $root: {
@@ -132,7 +132,7 @@ describe('#actions', () => {
    it('sends correct mutations', () => {
      const mockDate = new Date(1466424490000);
      getUuid.mockImplementationOnce(() => '1111');
-      const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
+      const spy = vi.spyOn(global, 'Date').mockImplementation(() => mockDate);
      const thumbUrl = '';
      const attachment = { thumbUrl, fileType: 'file' };

--- a/app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js
@@ -1,8 +1,8 @@
 import { actions } from '../../conversationAttributes';
 import { API } from 'widget/helpers/axios';

-const commit = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+vi.mock('widget/helpers/axios');

 describe('#actions', () => {
  describe('#get attributes', () => {
--- a/app/javascript/widget/store/modules/specs/message/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/message/actions.spec.js
@@ -1,8 +1,8 @@
 import { API } from 'widget/helpers/axios';
 import { actions } from '../../message';

-const commit = jest.fn();
-jest.mock('widget/helpers/axios');
+const commit = vi.fn();
+vi.mock('widget/helpers/axios');

 describe('#actions', () => {
  describe('#update', () => {