refactor(client): move to Vite by @phillipthelen

website/client/tests/unit/components/achievements/levelUp.spec.js

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import LevelUp from '@/components/achievements/levelUp.vue';
 
 /*
@@ -50,32 +51,32 @@ describe('LevelUp', () => {
   });
   */
 
-  it('displays the right level in the title', () => {
+  test('displays the right level in the title', () => {
     const title = testFunction('title', 12);
 
     expect(title()).to.equal('"reachedLevel" {"level":12}');
   });
 
-  it('does not display rewards for level 10', () => {
+  test('does not display rewards for level 10', () => {
     const displayRewardQuest = testFunction('displayRewardQuest', 10);
 
     expect(displayRewardQuest()).to.be.false;
   });
 
   [15, 30, 40, 60].forEach(level => {
-    it(`does display rewards for level ${level}`, () => {
+    test(`does display rewards for level ${level}`, () => {
       const displayRewardQuest = testFunction('displayRewardQuest', level);
 
       expect(displayRewardQuest()).to.be.true;
     });
   });
 
-  it('generates the right test class for level 15', () => {
+  test('generates the right test class for level 15', () => {
     const questClass = testFunction('questClass', 15);
     expect(questClass()).to.equal('inventory_quest_scroll_atom1');
   });
 
-  it('generates empty test class for level 14', () => {
+  test('generates empty test class for level 14', () => {
     const questClass = testFunction('questClass', 14);
     expect(questClass()).to.equal('');
   });

website/client/tests/unit/components/avatar.spec.js

@@ -1,10 +1,13 @@
+import {
+  describe, expect, test, beforeEach, afterEach,
+} from 'vitest';
 import Vue from 'vue';
 import merge from 'lodash/merge';
 
 import Avatar from '@/components/avatar';
 import generateStore from '@/store';
 
-context('avatar.vue', () => {
+describe('avatar.vue', () => {
   let Constructr;
   let vm;
 
@@ -38,7 +41,7 @@ context('avatar.vue', () => {
   });
 
   describe('hasClass', () => {
-    it('returns false if user is too low of level', () => {
+    test('returns false if user is too low of level', () => {
       vm.member = merge({
         stats: { lvl: 3 },
         preferences: { disableClasses: false },
@@ -47,7 +50,7 @@ context('avatar.vue', () => {
       expect(vm.hasClass).to.equal(false);
     });
 
-    it('returns false if user has disabled the class system', () => {
+    test('returns false if user has disabled the class system', () => {
       vm.member = merge({
         stats: { lvl: 17 },
         preferences: { disableClasses: true },
@@ -56,7 +59,7 @@ context('avatar.vue', () => {
       expect(vm.hasClass).to.equal(false);
     });
 
-    it('returns false if user has not yet selected a class', () => {
+    test('returns false if user has not yet selected a class', () => {
       vm.member = merge({
         stats: { lvl: 20 },
         preferences: { disableClasses: false },
@@ -65,7 +68,7 @@ context('avatar.vue', () => {
       expect(vm.hasClass).to.equal(false);
     });
 
-    it('returns true if user meets all prereqs for having a class', () => {
+    test('returns true if user meets all prereqs for having a class', () => {
       vm.member = merge({
         stats: { lvl: 13 },
         preferences: { disableClasses: false },
@@ -76,11 +79,11 @@ context('avatar.vue', () => {
   });
 
   describe('isBuffed', () => {
-    it('returns undefined if user is not buffed', () => {
+    test('returns undefined if user is not buffed', () => {
       expect(vm.isBuffed).to.equal(undefined);
     });
 
-    it('returns a value if user has buffs', () => {
+    test('returns a value if user has buffs', () => {
       vm.member = merge({
         stats: {
           buffs: {
@@ -96,12 +99,12 @@ context('avatar.vue', () => {
   });
 
   describe('paddingTop', () => {
-    xit('defaults to 27px', () => {
+    test('defaults to 24px', () => {
       vm.avatarOnly = true;
-      expect(vm.paddingTop).to.equal('27px');
+      expect(vm.paddingTop).to.equal('24px');
     });
 
-    it('is 24px if user has a pet', () => {
+    test('is 24px if user has a pet', () => {
       vm.member.items = merge({
         currentPet: { name: 'Foo' },
       }, baseMember.items);
@@ -109,7 +112,7 @@ context('avatar.vue', () => {
       expect(vm.paddingTop).to.equal('24px');
     });
 
-    it('is 0px if user has a mount', () => {
+    test('is 0px if user has a mount', () => {
       vm.member.items = merge({
         currentMount: 'Bar',
       }, baseMember.items);
@@ -117,18 +120,18 @@ context('avatar.vue', () => {
       expect(vm.paddingTop).to.equal('0px');
     });
 
-    it('can be overriden', () => {
+    test('can be overriden', () => {
       vm.overrideTopPadding = '27px';
       expect(vm.paddingTop).to.equal('27px');
     });
   });
 
   describe('costumeClass', () => {
-    it('returns if showing equipped gear', () => {
+    test('returns if showing equipped gear', () => {
       expect(vm.costumeClass).to.equal('equipped');
     });
 
-    it('returns if wearing a costume', () => {
+    test('returns if wearing a costume', () => {
       vm.member.preferences = { costume: true, hair: {} };
       vm.member.items.gear.costume = {};
 
@@ -137,7 +140,7 @@ context('avatar.vue', () => {
   });
 
   describe('visualBuffs', () => {
-    it('returns an array of buffs', () => {
+    test('returns an array of buffs', () => {
       vm.member = merge({
         stats: {
           class: 'warrior',
@@ -159,17 +162,17 @@ context('avatar.vue', () => {
       };
     });
 
-    it('shows the background', () => {
+    test('shows the background', () => {
       expect(vm.backgroundClass).to.equal('background_pony');
     });
 
-    it('can be overridden', () => {
+    test('can be overridden', () => {
       vm.overrideAvatarGear = { background: 'character' };
 
       expect(vm.backgroundClass).to.equal('background_character');
     });
 
-    it('returns to a blank string if not showing background', () => {
+    test('returns to a blank string if not showing background', () => {
       vm.withBackground = false;
       vm.avatarOnly = true;
 
@@ -178,11 +181,11 @@ context('avatar.vue', () => {
   });
 
   describe('specialMountClass', () => {
-    it('returns null if not riding a Kangaroo', () => {
+    test('returns null if not riding a Kangaroo', () => {
       expect(vm.specialMountClass).to.equal(null);
     });
 
-    it('returns corresponding offset class if riding a Kangaroo', () => {
+    test('returns corresponding offset class if riding a Kangaroo', () => {
       vm.member.items.currentMount = 'Kangaroo-Base';
 
       expect(vm.specialMountClass).to.equal('offset-kangaroo');
@@ -190,7 +193,7 @@ context('avatar.vue', () => {
   });
 
   describe('skinClass', () => {
-    it('returns current skin color', () => {
+    test('returns current skin color', () => {
       vm.member = merge({
         preferences: {
           skin: 'blue',
@@ -201,7 +204,7 @@ context('avatar.vue', () => {
       expect(vm.skinClass).to.equal('skin_blue');
     });
 
-    it('adds sleep if Dailies paused', () => {
+    test('adds sleep if Dailies paused', () => {
       vm.member = merge({
         preferences: {
           skin: 'blue',
@@ -213,7 +216,7 @@ context('avatar.vue', () => {
     });
   });
 
-  context('methods', () => {
+  describe('methods', () => {
     describe('getGearClass', () => {
       beforeEach(() => {
         vm.member = merge({
@@ -226,15 +229,15 @@ context('avatar.vue', () => {
         }, baseMember);
       });
 
-      it('returns undefined if no match', () => {
+      test('returns undefined if no match', () => {
         expect(vm.getGearClass('foo')).to.equal(undefined);
       });
 
-      it('returns the matching gear', () => {
+      test('returns the matching gear', () => {
         expect(vm.getGearClass('Hat')).to.equal('Fancy Tophat');
       });
 
-      it('can be overridden', () => {
+      test('can be overridden', () => {
         vm.overrideAvatarGear = { Hat: 'Dapper Bowler' };
 
         expect(vm.getGearClass('Hat')).to.equal('Dapper Bowler');
@@ -242,7 +245,7 @@ context('avatar.vue', () => {
     });
 
     describe('hideGear', () => {
-      it('returns no weapon equipped', () => {
+      test('returns no weapon equipped', () => {
         vm.member.items.gear.equipped = {};
         expect(vm.hideGear('weapon')).to.equal(false);
       });
@@ -277,7 +280,7 @@ context('avatar.vue', () => {
           },
         }, baseMember);
       });
-      it('does if not showing visual buffs', () => {
+      test('does if not showing visual buffs', () => {
         expect(vm.showAvatar()).to.equal(true);
 
         const { buffs } = vm.member.stats;

website/client/tests/unit/components/categories/categoryTags.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach,
+} from 'vitest';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 
@@ -20,7 +23,7 @@ describe('Category Tags', () => {
     });
   });
 
-  it('displays a category', () => {
+  test('displays a category', () => {
     wrapper.setProps({
       categories: [
         {
@@ -34,7 +37,7 @@ describe('Category Tags', () => {
     });
   });
 
-  it('displays a habitica official in purple', () => {
+  test('displays a habitica official in purple', () => {
     wrapper.setProps({
       categories: [
         {
@@ -46,7 +49,7 @@ describe('Category Tags', () => {
     expect(wrapper.find('.category-label').text()).to.eq('habitica_official');
   });
 
-  it('displays owner label', () => {
+  test('displays owner label', () => {
     wrapper.setProps({
       owner: true,
     });
@@ -54,7 +57,7 @@ describe('Category Tags', () => {
     expect(wrapper.find('.category-label').text()).to.eq('owned');
   });
 
-  it('displays member label', () => {
+  test('displays member label', () => {
     wrapper.setProps({
       member: true,
     });
@@ -62,7 +65,7 @@ describe('Category Tags', () => {
     expect(wrapper.find('.category-label').text()).to.eq('joined');
   });
 
-  it('displays additional content at the end', () => {
+  test('displays additional content at the end', () => {
     expect(wrapper.find('p').text()).to.eq('This is a slot.');
   });
 });

website/client/tests/unit/components/challenges/challengeDetail.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach,
+} from 'vitest';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import ChallengeDetailComponent from '@/components/challenges/challengeDetail.vue';
 import Store from '@/libs/store';
@@ -56,7 +59,7 @@ describe('Challenge Detail', () => {
     });
   });
 
-  it('removes a destroyed task from task list', () => {
+  test('removes a destroyed task from task list', () => {
     const taskToRemove = { _id: '1', type: 'habit' };
     wrapper.vm.taskDestroyed(taskToRemove);
     expect(wrapper.vm.tasksByType[taskToRemove.type].length).to.eq(0);

website/client/tests/unit/components/groups/membersModal.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach, afterEach,
+} from 'vitest';
 import Vue from 'vue';
 import MembersModalComponent from '@/components/groups/membersModal.vue';
 
@@ -15,12 +18,12 @@ describe.skip('Members Modal Component', () => {
       vm.$destroy();
     });
 
-    it('should have an empty object as sort-option at start', () => {
+    test('should have an empty object as sort-option at start', () => {
       const defaultData = vm.data();
       expect(defaultData.sortOption).to.eq({});
     });
 
-    it('should accept sort-option object', () => {
+    test('should accept sort-option object', () => {
       const sortOption = vm.data().sortOption[0];
       vm.sort(sortOption);
       Vue.nextTick(() => {

website/client/tests/unit/components/groups/myGuilds.spec.js

@@ -1,108 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Store from '@/libs/store';
-import myGuilds from '@/components/groups/myGuilds';
-import PublicGuildItem from '@/components/groups/publicGuildItem';
-
-const localVue = createLocalVue();
-localVue.use(Store);
-
-describe('myGuilds component', () => {
-  let computed;
-  const guilds = [{
-    _id: '1',
-    type: 'guild',
-    name: 'Crimson Vow',
-    summary: 'testing',
-    description: 'testing',
-  }, {
-    _id: '2',
-    type: 'guild',
-    name: 'Log Horizon',
-    summary: 'testing',
-    description: 'testing',
-  }, {
-    _id: '3',
-    type: 'guild',
-    name: 'CAD Cads',
-    summary: '3D',
-    description: '3D',
-  }, {
-    _id: '4',
-    type: 'guild',
-    name: 'Santa Claus',
-    summary: '3d',
-    description: 'hohoho',
-  }];
-  const store = new Store({
-    state: {
-      user: {
-        data: {
-          _id: '999',
-          guilds: ['1', '2', '3', '4'],
-        },
-      },
-      editingGroup: {},
-      constants: {
-        TAVERN_ID: '9999',
-      },
-    },
-    getters: {},
-    actions: {
-      'guilds:getMyGuilds': () => guilds,
-      'common:setTitle': () => {},
-    },
-  });
-
-  function makeWrapper (opts = {}) {
-    return shallowMount(myGuilds, {
-      data () {
-        return {
-          filter: {},
-          search: '',
-        };
-      },
-      store,
-      localVue,
-      ...opts,
-    });
-  }
-
-  before(() => {
-    computed = {
-      guilds: () => guilds,
-    };
-  });
-
-  it('renders all guilds with no filter and no search', () => {
-    const wrapper = makeWrapper({ computed });
-    expect(wrapper.findAll(PublicGuildItem).length).to.equal(4);
-  });
-
-  it('renders guilds with name matching against a single-word search term', () => {
-    const search = 'vow';
-    const wrapper = makeWrapper({ computed });
-    wrapper.setData({ search });
-    expect(wrapper.findAll(PublicGuildItem).length).to.equal(1);
-  });
-
-  it('renders guilds with summary matching against a single-word search term', () => {
-    const search = '3d';
-    const wrapper = makeWrapper({ computed });
-    wrapper.setData({ search });
-    expect(wrapper.findAll(PublicGuildItem).length).to.equal(2);
-  });
-
-  it('renders guilds with description matching against a single-word search term', () => {
-    const search = 'hoho';
-    const wrapper = makeWrapper({ computed });
-    wrapper.setData({ search });
-    expect(wrapper.findAll(PublicGuildItem).length).to.equal(1);
-  });
-
-  it('renders guilds with summary matching against two search terms with space in between', () => {
-    const search = '3d    ohayou';
-    const wrapper = makeWrapper({ computed });
-    wrapper.setData({ search });
-    expect(wrapper.findAll(PublicGuildItem).length).to.equal(2);
-  });
-});

website/client/tests/unit/components/home.spec.js

@@ -1,9 +1,14 @@
+import {
+  describe, expect, test, beforeEach, afterEach,
+} from 'vitest';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
+import sinon from 'sinon';
 import Home from '@/components/static/home.vue';
 import Store from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 
+const sandbox = sinon.createSandbox();
 const localVue = createLocalVue();
 localVue.use(Store);
 
@@ -49,14 +54,16 @@ describe('Home', () => {
     wrapper = mountWrapper();
   });
 
-  afterEach(sinon.restore);
+  afterEach(() => {
+    sandbox.restore();
+  });
 
-  it('has a visible title', () => {
+  test('has a visible title', () => {
     expect(wrapper.find('h1').text()).to.equal('motivateYourself');
   });
 
   describe('signup form', () => {
-    it('registers a user from the form', async () => {
+    test('registers a user from the form', async () => {
       const username = 'newUser';
       const email = 'rookie@habitica.com';
       const password = 'ImmaG3tProductive!';
@@ -74,7 +81,7 @@ describe('Home', () => {
       });
     });
 
-    it('registers a user with group invite if groupInvite in the query', async () => {
+    test('registers a user with group invite if groupInvite in the query', async () => {
       const groupInvite = 'TheBestGroup';
       wrapper = mountWrapper({ groupInvite });
       await fillOutUserForm('invitedUser', 'invited@habitica.com', '1veGotFri3ndsHooray!');
@@ -85,7 +92,7 @@ describe('Home', () => {
       expect(registerStub.getCall(0).args[1].groupInvite).to.equal(groupInvite);
     });
 
-    it('registers a user with group invite if p in the query', async () => {
+    test('registers a user with group invite if p in the query', async () => {
       const p = 'ThePiGroup';
       wrapper = mountWrapper({ p });
       await fillOutUserForm('alsoInvitedUser', 'invited2@habitica.com', '1veGotFri3nds2!');
@@ -96,7 +103,7 @@ describe('Home', () => {
       expect(registerStub.getCall(0).args[1].groupInvite).to.equal(p);
     });
 
-    it('registers a user with group invite invite if both p and groupInvite are in the query', async () => {
+    test('registers a user with group invite invite if both p and groupInvite are in the query', async () => {
       const groupInvite = 'StillTheBestGroup';
       wrapper = mountWrapper({ p: 'LesserGroup', groupInvite });
       await fillOutUserForm('doublyInvitedUser', 'invited3@habitica.com', '1veGotSm4rtFri3nds!');

website/client/tests/unit/components/memberDetails.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach, afterEach,
+} from 'vitest';
 import Vue from 'vue';
 import MemberDetailsComponent from '@/components/memberDetails.vue';
 
@@ -14,7 +17,7 @@ describe('Members Details Component', () => {
     vm.$destroy();
   });
 
-  it.skip('prevents flickering by setting a 1px margin-right on elements of class member-stats', () => {
+  test.skip('prevents flickering by setting a 1px margin-right on elements of class member-stats', () => {
     const memberstats = vm.$el.querySelector('.member-stats');
     const style = window.getComputedStyle(memberstats, null);
     const marginRightProp = style.getPropertyValue('margin-right');

website/client/tests/unit/components/messages/messageCard.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach,
+} from 'vitest';
 import Vue from 'vue';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
@@ -42,19 +45,19 @@ describe('MessageCard', () => {
     });
   });
 
-  it('shows the message text', () => {
+  test('shows the message text', () => {
     expect(wrapper.find('div.text').text()).to.equal(message.text);
     expect(wrapper.find('div.mentioned-icon').exists()).to.be.false;
   });
 
-  it('shows mention dot if user is mentioned', () => {
+  test('shows mention dot if user is mentioned', () => {
     wrapper.setProps({ msg: createMessage('@Tester') });
 
     expect(wrapper.find('div.mentioned-icon').exists()).to.be.true;
   });
 
   // Bug fixed by https://github.com/HabitRPG/habitica/pull/12177
-  it('shows mention dot if user is mentioned after almostmention', () => {
+  test('shows mention dot if user is mentioned after almostmention', () => {
     wrapper.setProps({ msg: createMessage('thetester @Tester') });
 
     expect(wrapper.find('div.mentioned-icon').exists()).to.be.true;

website/client/tests/unit/components/notifications.spec.js

@@ -1,9 +1,16 @@
+import {
+  describe, expect, test, beforeEach, chai,
+} from 'vitest';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { toNextLevel } from '@/../../common/script/statHelpers';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
 import NotificationsComponent from '@/components/notifications.vue';
 import Store from '@/libs/store';
 import { hasClass } from '@/store/getters/members';
 
+chai.use(sinonChai);
+
 const localVue = createLocalVue();
 localVue.use(Store);
 
@@ -46,7 +53,7 @@ describe('Notifications', () => {
     });
   });
 
-  it('set user has class computed prop', () => {
+  test('set user has class computed prop', () => {
     expect(wrapper.vm.userHasClass).to.be.false;
 
     store.state.user.data.stats.lvl = 10;
@@ -57,7 +64,7 @@ describe('Notifications', () => {
   });
 
   describe('user exp notifcation', () => {
-    it('notifies when user gets more exp', () => {
+    test('notifies when user gets more exp', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevel = 10;
@@ -72,7 +79,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user levels with exact xp', () => {
+    test('when user levels with exact xp', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevelBefore = 9;
@@ -94,7 +101,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user levels with exact more exp than needed', () => {
+    test('when user levels with exact more exp than needed', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevelBefore = 9;
@@ -116,7 +123,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user has more exp than needed then levels', () => {
+    test('when user has more exp than needed then levels', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevelBefore = 9;
@@ -138,7 +145,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user multilevels', () => {
+    test('when user multilevels', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevelBefore = 8;
@@ -160,7 +167,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user looses xp', () => {
+    test('when user looses xp', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevel = 10;
@@ -179,7 +186,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user looses xp under 0', () => {
+    test('when user looses xp under 0', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevel = 10;
@@ -198,7 +205,7 @@ describe('Notifications', () => {
       expSpy.restore();
     });
 
-    it('when user dies', () => {
+    test('when user dies', () => {
       const expSpy = sinon.spy(wrapper.vm, 'exp');
 
       const userLevelBefore = 10;

website/client/tests/unit/components/sidebarSection.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach,
+} from 'vitest';
 import { mount } from '@vue/test-utils';
 
 import SidebarSection from '@/components/sidebarSection.vue';
@@ -16,21 +19,21 @@ describe('Sidebar Section', () => {
     });
   });
 
-  it('displays title', () => {
+  test('displays title', () => {
     expect(wrapper.find('h3').text()).to.eq('Hello World');
   });
 
-  it('displays contents', () => {
+  test('displays contents', () => {
     expect(wrapper.find('.section-body').find('p').text()).to.eq('This is a test.');
   });
 
-  it('displays tooltip icon', () => {
+  test('displays tooltip icon', () => {
     expect(wrapper.contains('.section-info')).to.eq(false);
     wrapper.setProps({ tooltip: 'This is a test' });
     expect(wrapper.contains('.section-info')).to.eq(true);
   });
 
-  it('hides contents', () => {
+  test('hides contents', () => {
     expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
     wrapper.find('[role="button"').trigger('click');
     expect(wrapper.find('.section-body').element.style.display).to.eq('none');
@@ -38,7 +41,7 @@ describe('Sidebar Section', () => {
     expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
   });
 
-  it('can hide contents by default', () => {
+  test('can hide contents by default', () => {
     wrapper = mount(SidebarSection, {
       propsData: {
         title: 'Hello World',

website/client/tests/unit/components/tasks/column.spec.js

@@ -1,3 +1,6 @@
+import {
+  describe, expect, test, beforeEach,
+} from 'vitest';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import TaskColumn from '@/components/tasks/column.vue';
 import Store from '@/libs/store';
@@ -41,7 +44,7 @@ describe('Task Column', () => {
     });
   }
 
-  it('returns a vue instance', () => {
+  test('returns a vue instance', () => {
     wrapper = makeWrapper();
     expect(wrapper.isVueInstance()).to.be.true;
   });
@@ -51,11 +54,11 @@ describe('Task Column', () => {
       wrapper = makeWrapper();
     });
 
-    it('defaults isUser to false', () => {
+    test('defaults isUser to false', () => {
       expect(wrapper.vm.isUser).to.be.false;
     });
 
-    it('passes isUser to component instance', () => {
+    test('passes isUser to component instance', () => {
       wrapper.setProps({ isUser: false });
 
       expect(wrapper.vm.isUser).to.be.false;
@@ -106,7 +109,7 @@ describe('Task Column', () => {
       wrapper = makeWrapper({ store });
     });
 
-    it('returns task list from props for group-plan', () => {
+    test('returns task list from props for group-plan', () => {
       wrapper.setProps({ taskListOverride });
 
       wrapper.vm.taskList.forEach((el, i) => {
@@ -120,7 +123,7 @@ describe('Task Column', () => {
       });
     });
 
-    it('returns task list from store for user', () => {
+    test('returns task list from store for user', () => {
       wrapper.setProps({ isUser: true, taskListOverride });
 
       wrapper.vm.taskList.forEach((el, i) => {
@@ -142,7 +145,7 @@ describe('Task Column', () => {
         ];
       });
 
-      it('returns all tasks if no tag is given', () => {
+      test('returns all tasks if no tag is given', () => {
         const returnedTasks = wrapper.vm.filterByTagList(tasks);
         expect(returnedTasks).to.have.lengthOf(tasks.length);
         tasks.forEach((task, i) => {
@@ -150,7 +153,7 @@ describe('Task Column', () => {
         });
       });
 
-      it('returns tasks for given single tag', () => {
+      test('returns tasks for given single tag', () => {
         const returnedTasks = wrapper.vm.filterByTagList(tasks, [3]);
 
         expect(returnedTasks).to.have.lengthOf(3);
@@ -159,7 +162,7 @@ describe('Task Column', () => {
         expect(returnedTasks[2]).to.eq(tasks[3]);
       });
 
-      it('returns tasks for given multiple tags', () => {
+      test('returns tasks for given multiple tags', () => {
         const returnedTasks = wrapper.vm.filterByTagList(tasks, [2, 3]);
 
         expect(returnedTasks).to.have.lengthOf(1);
@@ -201,7 +204,7 @@ describe('Task Column', () => {
         ];
       });
 
-      it('returns all tasks for empty search term', () => {
+      test('returns all tasks for empty search term', () => {
         const returnedTasks = wrapper.vm.filterBySearchText(tasks);
         expect(returnedTasks).to.have.lengthOf(tasks.length);
         tasks.forEach((task, i) => {
@@ -209,19 +212,19 @@ describe('Task Column', () => {
         });
       });
 
-      it('returns tasks for search term in title /i', () => {
+      test('returns tasks for search term in title /i', () => {
         ['Title', 'TITLE', 'title', 'tItLe'].forEach(term => {
           expect(wrapper.vm.filterBySearchText(tasks, term)[0]).to.eq(tasks[2]);
         });
       });
 
-      it('returns tasks for search term in note /i', () => {
+      test('returns tasks for search term in note /i', () => {
         ['Note', 'NOTE', 'note', 'nOtE'].forEach(term => {
           expect(wrapper.vm.filterBySearchText(tasks, term)[0]).to.eq(tasks[3]);
         });
       });
 
-      it('returns tasks for search term in checklist title /i', () => {
+      test('returns tasks for search term in checklist title /i', () => {
         ['Check', 'CHECK', 'check', 'cHeCK'].forEach(term => {
           const returnedTasks = wrapper.vm.filterBySearchText(tasks, term);
 

website/client/tests/unit/components/tasks/user.spec.js

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import User from '@/components/tasks/user.vue';
 import Store from '@/libs/store';
@@ -21,7 +22,7 @@ describe('Tasks User', () => {
   }
 
   describe('Computed Properties', () => {
-    it('should render a challenge tag under challenge header in tag filter popup when the challenge is active', () => {
+    test('should render a challenge tag under challenge header in tag filter popup when the challenge is active', () => {
       const activeChallengeTag = {
         id: '1',
         name: 'Challenge1',
@@ -35,7 +36,7 @@ describe('Tasks User', () => {
       expect(computedTagsByType.challenges.tags[0].name).to.equal(activeChallengeTag.name);
     });
 
-    it('should render a challenge tag under normal tag header in tag filter popup when the challenge is no longer active', () => {
+    test('should render a challenge tag under normal tag header in tag filter popup when the challenge is no longer active', () => {
       const inactiveChallengeTag = {
         id: '1',
         name: 'Challenge1',

website/client/tests/unit/components/ui/drawer.spec.js

@@ -1,14 +1,15 @@
+import { describe, expect, test } from 'vitest';
 import Vue from 'vue';
 import DrawerComponent from '@/components/ui/drawer.vue';
 
 describe('DrawerComponent', () => {
-  it('sets the correct default data', () => {
+  test('sets the correct default data', () => {
     expect(DrawerComponent.data).to.be.a('function');
     const defaultData = DrawerComponent.data();
     expect(defaultData.isOpened).to.be.true;
   });
 
-  it('renders the correct title', () => {
+  test('renders the correct title', () => {
     const Ctor = Vue.extend(DrawerComponent);
     const vm = new Ctor({
       propsData: {