Merge branch 'vs-migrate-related-items-tree-to-jest' into 'master'

Migrate ee/spec/javascripts/related_items_tree/ to Jest

Closes #118456 and #194302

See merge request gitlab-org/gitlab!27015

ee/app/assets/javascripts/related_items_tree/related_items_tree_bundle.js

 import Vue from 'vue';
-import { mapActions } from 'vuex';
+import Vuex from 'vuex';
 
 import { parseBoolean } from '~/lib/utils/common_utils';
 
@@ -9,6 +9,8 @@ import RelatedItemsTreeApp from './components/related_items_tree_app.vue';
 import TreeRoot from './components/tree_root.vue';
 import TreeItem from './components/tree_item.vue';
 
+Vue.use(Vuex);
+
 export default () => {
   const el = document.getElementById('js-tree');
 
@@ -58,7 +60,7 @@ export default () => {
       });
     },
     methods: {
-      ...mapActions(['setInitialParentItem', 'setInitialConfig']),
+      ...Vuex.mapActions(['setInitialParentItem', 'setInitialConfig']),
     },
     render: createElement => createElement('related-items-tree-app'),
   });

ee/app/assets/javascripts/related_items_tree/store/index.js

-import Vue from 'vue';
 import Vuex from 'vuex';
 
 import * as actions from './actions';
@@ -6,8 +5,6 @@ import * as getters from './getters';
 import mutations from './mutations';
 import getDefaultState from './state';
 
-Vue.use(Vuex);
-
 const createStore = () =>
   new Vuex.Store({
     state: getDefaultState(),

ee/spec/javascripts/related_items_tree/components/create_epic_form_spec.js → ee/spec/frontend/related_items_tree/components/create_epic_form_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 
 import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vue';
 
-const localVue = createLocalVue();
-
 const createComponent = (isSubmitting = false) =>
-  mount(localVue.extend(CreateEpicForm), {
-    localVue,
+  shallowMount(CreateEpicForm, {
     propsData: {
       isSubmitting,
     },
@@ -31,31 +28,29 @@ describe('RelatedItemsTree', () => {
           expect(wrapper.vm.isSubmitButtonDisabled).toBe(true);
         });
 
-        it('returns false when either `inputValue` prop is non-empty or `isSubmitting` prop is false', done => {
+        it('returns false when either `inputValue` prop is non-empty or `isSubmitting` prop is false', () => {
           const wrapperWithInput = createComponent(false);
 
           wrapperWithInput.setData({
             inputValue: 'foo',
           });
 
-          wrapperWithInput.vm.$nextTick(() => {
+          return wrapperWithInput.vm.$nextTick(() => {
             expect(wrapperWithInput.vm.isSubmitButtonDisabled).toBe(false);
 
             wrapperWithInput.destroy();
-            done();
           });
         });
       });
 
       describe('buttonLabel', () => {
-        it('returns string "Creating epic" when `isSubmitting` prop is true', done => {
+        it('returns string "Creating epic" when `isSubmitting` prop is true', () => {
           const wrapperSubmitting = createComponent(true);
 
-          wrapperSubmitting.vm.$nextTick(() => {
+          return wrapperSubmitting.vm.$nextTick(() => {
             expect(wrapperSubmitting.vm.buttonLabel).toBe('Creating epic');
 
             wrapperSubmitting.destroy();
-            done();
           });
         });
 

ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import {
   GlButton,
   GlDropdown,
@@ -12,14 +13,13 @@ import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import CreateIssueForm from 'ee/related_items_tree/components/create_issue_form.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
 
-// https://gitlab.com/gitlab-org/gitlab/issues/118456
-import {
-  mockInitialConfig,
-  mockParentItem,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockInitialConfig, mockParentItem } from '../mock_data';
 
 const mockProjects = getJSONFixture('static/projects.json');
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 const createComponent = () => {
   const store = createDefaultStore();
 
@@ -27,6 +27,7 @@ const createComponent = () => {
   store.dispatch('setInitialParentItem', mockParentItem);
 
   return shallowMount(CreateIssueForm, {
+    localVue,
     store,
   });
 };

ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 
 import RelatedItemsTreeApp from 'ee/related_items_tree/components/related_items_tree_app.vue';
@@ -13,16 +14,13 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import { getJSONFixture } from 'helpers/fixtures';
 
-// https://gitlab.com/gitlab-org/gitlab/issues/118456
-import {
-  mockInitialConfig,
-  mockParentItem,
-  mockEpics,
-  mockIssues,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockInitialConfig, mockParentItem, mockEpics, mockIssues } from '../mock_data';
 
 const mockProjects = getJSONFixture('static/projects.json');
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 const createComponent = () => {
   const store = createDefaultStore();
 
@@ -34,6 +32,7 @@ const createComponent = () => {
   });
 
   return shallowMount(RelatedItemsTreeApp, {
+    localVue,
     store,
   });
 };

ee/spec/javascripts/related_items_tree/components/related_items_tree_body_spec.js → ee/spec/frontend/related_items_tree/components/related_items_tree_body_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import RelatedItemsBody from 'ee/related_items_tree/components/related_items_tree_body.vue';
 
 import { mockParentItem } from '../mock_data';
 
-const localVue = createLocalVue();
-
 const createComponent = (parentItem = mockParentItem, children = []) =>
-  shallowMount(localVue.extend(RelatedItemsBody), {
-    localVue,
+  shallowMount(RelatedItemsBody, {
     stubs: {
       'tree-root': true,
     },
@@ -32,7 +29,7 @@ describe('RelatedItemsTree', () => {
 
     describe('template', () => {
       it('renders component container element with class `related-items-tree-body`', () => {
-        expect(wrapper.vm.$el.classList.contains('related-items-tree-body')).toBe(true);
+        expect(wrapper.classes('related-items-tree-body')).toBe(true);
       });
 
       it('renders tree-root component', () => {

ee/spec/frontend/related_items_tree/components/related_items_tree_header_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { GlButton, GlTooltip } from '@gitlab/ui';
 
 import RelatedItemsTreeHeader from 'ee/related_items_tree/components/related_items_tree_header.vue';
@@ -8,11 +9,10 @@ import { issuableTypesMap } from 'ee/related_issues/constants';
 import EpicActionsSplitButton from 'ee/related_items_tree/components/epic_actions_split_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
-import {
-  mockInitialConfig,
-  mockParentItem,
-  mockQueryResponse,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockInitialConfig, mockParentItem, mockQueryResponse } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 const createComponent = ({ slots } = {}) => {
   const store = createDefaultStore();
@@ -32,6 +32,7 @@ const createComponent = ({ slots } = {}) => {
   store.dispatch('setChildrenCount', mockParentItem.descendantCounts);
 
   return shallowMount(RelatedItemsTreeHeader, {
+    localVue,
     store,
     slots,
   });
@@ -73,7 +74,7 @@ describe('RelatedItemsTree', () => {
         let toggleAddItemForm;
 
         beforeEach(() => {
-          toggleAddItemForm = jasmine.createSpy();
+          toggleAddItemForm = jest.fn();
           wrapper.vm.$store.hotUpdate({
             actions: {
               toggleAddItemForm,
@@ -86,7 +87,7 @@ describe('RelatedItemsTree', () => {
 
           expect(toggleAddItemForm).toHaveBeenCalled();
 
-          const payload = toggleAddItemForm.calls.mostRecent().args[1];
+          const payload = toggleAddItemForm.mock.calls[0][1];
 
           expect(payload).toEqual({
             issuableType: issuableTypesMap.EPIC,
@@ -99,7 +100,7 @@ describe('RelatedItemsTree', () => {
         let toggleCreateEpicForm;
 
         beforeEach(() => {
-          toggleCreateEpicForm = jasmine.createSpy();
+          toggleCreateEpicForm = jest.fn();
           wrapper.vm.$store.hotUpdate({
             actions: {
               toggleCreateEpicForm,
@@ -112,7 +113,8 @@ describe('RelatedItemsTree', () => {
 
           expect(toggleCreateEpicForm).toHaveBeenCalled();
 
-          const payload = toggleCreateEpicForm.calls.mostRecent().args[1];
+          const payload =
+            toggleCreateEpicForm.mock.calls[toggleCreateEpicForm.mock.calls.length - 1][1];
 
           expect(payload).toEqual({ toggleState: true });
         });
@@ -129,8 +131,8 @@ describe('RelatedItemsTree', () => {
         let setItemInputValue;
 
         beforeEach(() => {
-          setItemInputValue = jasmine.createSpy();
-          toggleAddItemForm = jasmine.createSpy();
+          setItemInputValue = jest.fn();
+          toggleAddItemForm = jest.fn();
           wrapper.vm.$store.hotUpdate({
             actions: {
               setItemInputValue,
@@ -144,11 +146,11 @@ describe('RelatedItemsTree', () => {
 
           expect(setItemInputValue).toHaveBeenCalled();
 
-          expect(setItemInputValue.calls.mostRecent().args[1]).toEqual('');
+          expect(setItemInputValue.mock.calls[setItemInputValue.mock.calls.length - 1][1]).toBe('');
 
           expect(toggleAddItemForm).toHaveBeenCalled();
 
-          const payload = toggleAddItemForm.calls.mostRecent().args[1];
+          const payload = toggleAddItemForm.mock.calls[setItemInputValue.mock.calls.length - 1][1];
 
           expect(payload).toEqual({
             issuableType: issuableTypesMap.ISSUE,

ee/spec/javascripts/related_items_tree/components/state_tooltip_spec.js → ee/spec/frontend/related_items_tree/components/state_tooltip_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 import { GlTooltip } from '@gitlab/ui';
 
@@ -14,8 +14,6 @@ const mockClosedAt = `${currentDate.getFullYear() - 1}-${currentDate.getMonth()
   1}-${currentDate.getDate()}`;
 const mockClosedAtYear = currentDate.getFullYear() - 1;
 
-const localVue = createLocalVue();
-
 const createComponent = ({
   getTargetRef = () => {},
   isOpen = false,
@@ -23,8 +21,7 @@ const createComponent = ({
   createdAt = mockCreatedAt,
   closedAt = mockClosedAt,
 }) =>
-  shallowMount(localVue.extend(StateTooltip), {
-    localVue,
+  shallowMount(StateTooltip, {
     propsData: {
       getTargetRef,
       isOpen,
@@ -48,27 +45,23 @@ describe('RelatedItemsTree', () => {
 
     describe('computed', () => {
       describe('stateText', () => {
-        it('returns string `Opened` when `isOpen` prop is true', done => {
+        it('returns string `Opened` when `isOpen` prop is true', () => {
           wrapper.setProps({
             isOpen: true,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateText).toBe('Opened');
-
-            done();
           });
         });
 
-        it('returns string `Closed` when `isOpen` prop is false', done => {
+        it('returns string `Closed` when `isOpen` prop is false', () => {
           wrapper.setProps({
             isOpen: false,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateText).toBe('Closed');
-
-            done();
           });
         });
       });
@@ -98,53 +91,45 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('stateTimeInWords', () => {
-        it('returns string using `createdAtInWords` prop when `isOpen` is true', done => {
+        it('returns string using `createdAtInWords` prop when `isOpen` is true', () => {
           wrapper.setProps({
             isOpen: true,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateTimeInWords).toBe('2 years ago');
-
-            done();
           });
         });
 
-        it('returns string using `closedAtInWords` prop when `isOpen` is false', done => {
+        it('returns string using `closedAtInWords` prop when `isOpen` is false', () => {
           wrapper.setProps({
             isOpen: false,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateTimeInWords).toBe('1 year ago');
-
-            done();
           });
         });
       });
 
       describe('stateTimestamp', () => {
-        it('returns string using `createdAtTimestamp` prop when `isOpen` is true', done => {
+        it('returns string using `createdAtTimestamp` prop when `isOpen` is true', () => {
           wrapper.setProps({
             isOpen: true,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateTimestamp).toContain(mockCreatedAtYear);
-
-            done();
           });
         });
 
-        it('returns string using `closedAtInWords` prop when `isOpen` is false', done => {
+        it('returns string using `closedAtInWords` prop when `isOpen` is false', () => {
           wrapper.setProps({
             isOpen: false,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateTimestamp).toContain(mockClosedAtYear);
-
-            done();
           });
         });
       });

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { GlButton, GlLink } from '@gitlab/ui';
 
 import ItemWeight from 'ee/boards/components/issue_card_weight.vue';
@@ -15,12 +16,10 @@ import ItemDueDate from '~/boards/components/issue_due_date.vue';
 import ItemMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 
-import {
-  mockParentItem,
-  mockInitialConfig,
-  mockQueryResponse,
-  mockIssue1,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockParentItem, mockInitialConfig, mockQueryResponse, mockIssue1 } from '../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
 
 const mockItem = Object.assign({}, mockIssue1, {
   type: ChildType.Issue,
@@ -45,6 +44,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   });
 
   return shallowMount(TreeItemBody, {
+    localVue,
     store,
     propsData: {
       parentItem,
@@ -75,7 +75,7 @@ describe('RelatedItemsTree', () => {
       describe('itemWebPath', () => {
         const mockPath = '/foo/bar';
 
-        it('returns value of `item.path`', done => {
+        it('returns value of `item.path`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               path: mockPath,
@@ -83,14 +83,12 @@ describe('RelatedItemsTree', () => {
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.itemWebPath).toBe(mockPath);
-
-            done();
           });
         });
 
-        it('returns value of `item.webPath` when `item.path` is undefined', done => {
+        it('returns value of `item.webPath` when `item.path` is undefined', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               path: undefined,
@@ -98,42 +96,36 @@ describe('RelatedItemsTree', () => {
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.itemWebPath).toBe(mockPath);
-
-            done();
           });
         });
       });
 
       describe('isOpen', () => {
-        it('returns true when `item.state` value is `opened`', done => {
+        it('returns true when `item.state` value is `opened`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               state: ChildState.Open,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.isOpen).toBe(true);
-
-            done();
           });
         });
       });
 
       describe('isClosed', () => {
-        it('returns true when `item.state` value is `closed`', done => {
+        it('returns true when `item.state` value is `closed`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               state: ChildState.Closed,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.isClosed).toBe(true);
-
-            done();
           });
         });
       });
@@ -151,91 +143,79 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('stateText', () => {
-        it('returns string `Opened` when `item.state` value is `opened`', done => {
+        it('returns string `Opened` when `item.state` value is `opened`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               state: ChildState.Open,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateText).toBe('Opened');
-
-            done();
           });
         });
 
-        it('returns string `Closed` when `item.state` value is `closed`', done => {
+        it('returns string `Closed` when `item.state` value is `closed`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               state: ChildState.Closed,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateText).toBe('Closed');
-
-            done();
           });
         });
       });
 
       describe('stateIconName', () => {
-        it('returns string `epic` when `item.type` value is `epic`', done => {
+        it('returns string `epic` when `item.type` value is `epic`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               type: ChildType.Epic,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateIconName).toBe('epic');
-
-            done();
           });
         });
 
-        it('returns string `issues` when `item.type` value is `issue`', done => {
+        it('returns string `issues` when `item.type` value is `issue`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               type: ChildType.Issue,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateIconName).toBe('issues');
-
-            done();
           });
         });
       });
 
       describe('stateIconClass', () => {
-        it('returns string `issue-token-state-icon-open` when `item.state` value is `opened`', done => {
+        it('returns string `issue-token-state-icon-open` when `item.state` value is `opened`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               state: ChildState.Open,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateIconClass).toBe('issue-token-state-icon-open');
-
-            done();
           });
         });
 
-        it('returns string `issue-token-state-icon-closed` when `item.state` value is `closed`', done => {
+        it('returns string `issue-token-state-icon-closed` when `item.state` value is `closed`', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               state: ChildState.Closed,
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.stateIconClass).toBe('issue-token-state-icon-closed');
-
-            done();
           });
         });
       });
@@ -257,17 +237,15 @@ describe('RelatedItemsTree', () => {
           expect(wrapper.vm.computedPath).toBe(mockItem.webPath);
         });
 
-        it('returns `null` when `itemWebPath` is empty', done => {
+        it('returns `null` when `itemWebPath` is empty', () => {
           wrapper.setProps({
             item: Object.assign({}, mockItem, {
               webPath: '',
             }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.computedPath).toBeNull();
-
-            done();
           });
         });
       });

ee/spec/javascripts/related_items_tree/components/tree_item_remove_modal_spec.js → ee/spec/frontend/related_items_tree/components/tree_item_remove_modal_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { GlModal } from '@gitlab/ui';
 
 import TreeItemRemoveModal from 'ee/related_items_tree/components/tree_item_remove_modal.vue';
@@ -10,14 +11,15 @@ import { PathIdSeparator } from 'ee/related_issues/constants';
 
 import { mockParentItem, mockQueryResponse, mockIssue1 } from '../mock_data';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 const mockItem = Object.assign({}, mockIssue1, {
   type: ChildType.Issue,
   pathIdSeparator: PathIdSeparator.Issue,
   assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
 });
 
-const localVue = createLocalVue();
-
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   const store = createDefaultStore();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
@@ -37,7 +39,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
     item,
   });
 
-  return shallowMount(localVue.extend(TreeItemRemoveModal), {
+  return shallowMount(TreeItemRemoveModal, {
     localVue,
     store,
   });
@@ -63,61 +65,53 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('modalTitle', () => {
-        it('returns title for modal when item.type is `Epic`', done => {
+        it('returns title for modal when item.type is `Epic`', () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: Object.assign({}, mockItem, { type: ChildType.Epic }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.modalTitle).toBe('Remove epic');
-
-            done();
           });
         });
 
-        it('returns title for modal when item.type is `Issue`', done => {
+        it('returns title for modal when item.type is `Issue`', () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: mockItem,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.modalTitle).toBe('Remove issue');
-
-            done();
           });
         });
       });
 
       describe('modalBody', () => {
-        it('returns body text for modal when item.type is `Epic`', done => {
+        it('returns body text for modal when item.type is `Epic`', () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: Object.assign({}, mockItem, { type: ChildType.Epic }),
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.modalBody).toBe(
               'This will also remove any descendents of <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>. Are you sure?',
             );
-
-            done();
           });
         });
 
-        it('returns body text for modal when item.type is `Issue`', done => {
+        it('returns body text for modal when item.type is `Issue`', () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: mockItem,
           });
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(wrapper.vm.modalBody).toBe(
               'Are you sure you want to remove <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>?',
             );
-
-            done();
           });
         });
       });

ee/spec/frontend/related_items_tree/components/tree_item_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 
 import TreeItem from 'ee/related_items_tree/components/tree_item.vue';
@@ -12,17 +13,16 @@ import { PathIdSeparator } from 'ee/related_issues/constants';
 
 import Icon from '~/vue_shared/components/icon.vue';
 
-import {
-  mockParentItem,
-  mockQueryResponse,
-  mockEpic1,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockParentItem, mockQueryResponse, mockEpic1 } from '../mock_data';
 
 const mockItem = Object.assign({}, mockEpic1, {
   type: ChildType.Epic,
   pathIdSeparator: PathIdSeparator.Epic,
 });
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   const store = createDefaultStore();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
@@ -44,6 +44,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   });
 
   return shallowMount(TreeItem, {
+    localVue,
     store,
     stubs: {
       'tree-root': TreeRoot,
@@ -158,18 +159,16 @@ describe('RelatedItemsTree', () => {
         expect(collapsedIcon.props('name')).toBe('chevron-right');
       });
 
-      it('renders loading icon when item expand is in progress', done => {
+      it('renders loading icon when item expand is in progress', () => {
         wrapper.vm.$store.dispatch('requestItems', {
           parentItem: mockItem,
           isSubItem: true,
         });
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           const loadingIcon = wrapper.find(GlLoadingIcon);
 
           expect(loadingIcon.isVisible()).toBe(true);
-
-          done();
         });
       });
 

ee/spec/javascripts/related_items_tree/components/tree_root_spec.js → ee/spec/frontend/related_items_tree/components/tree_root_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
 import { GlButton } from '@gitlab/ui';
 
 import Draggable from 'vuedraggable';
@@ -20,6 +21,7 @@ import {
 const { epic } = mockQueryResponse.data.group;
 
 const localVue = createLocalVue();
+localVue.use(Vuex);
 
 const createComponent = ({
   parentItem = mockParentItem,
@@ -46,7 +48,7 @@ const createComponent = ({
     pageInfo: issuesPageInfo,
   });
 
-  return shallowMount(localVue.extend(TreeRoot), {
+  return shallowMount(TreeRoot, {
     localVue,
     store,
     stubs: {
@@ -106,7 +108,7 @@ describe('RelatedItemsTree', () => {
           describe('treeRootOptions', () => {
             it('should return object containing Vue.Draggable config extended from `defaultSortableConfig` when userSignedIn prop is true', () => {
               expect(wrapper.vm.treeRootOptions).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   animation: 200,
                   forceFallback: true,
                   fallbackClass: 'is-dragging',
@@ -128,7 +130,7 @@ describe('RelatedItemsTree', () => {
                 userSignedIn: false,
               });
 
-              expect(wrapper.vm.treeRootOptions).toEqual(jasmine.objectContaining({}));
+              expect(wrapper.vm.treeRootOptions).toEqual(expect.objectContaining({}));
             });
           });
         });
@@ -156,7 +158,7 @@ describe('RelatedItemsTree', () => {
                   newIndex,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   id: mockEpic1.id,
                 }),
               );
@@ -167,7 +169,7 @@ describe('RelatedItemsTree', () => {
                   newIndex,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   id: mockIssue2.epicIssueId,
                 }),
               );
@@ -182,7 +184,7 @@ describe('RelatedItemsTree', () => {
                   newIndex: 0,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   adjacentReferenceId: mockEpic1.id,
                 }),
               );
@@ -193,7 +195,7 @@ describe('RelatedItemsTree', () => {
                   newIndex: 2,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   adjacentReferenceId: mockIssue2.epicIssueId,
                 }),
               );
@@ -208,7 +210,7 @@ describe('RelatedItemsTree', () => {
                   newIndex: 0,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   relativePosition: 'after',
                 }),
               );
@@ -223,7 +225,7 @@ describe('RelatedItemsTree', () => {
                   newIndex: wrapper.vm.children.length - 1,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   relativePosition: 'before',
                 }),
               );
@@ -238,7 +240,7 @@ describe('RelatedItemsTree', () => {
                   newIndex: 2,
                 }),
               ).toEqual(
-                jasmine.objectContaining({
+                expect.objectContaining({
                   relativePosition: 'after',
                 }),
               );
@@ -257,7 +259,7 @@ describe('RelatedItemsTree', () => {
 
           describe('handleDragOnEnd', () => {
             it('removes class `is-dragging` from document body', () => {
-              spyOn(wrapper.vm, 'reorderItem').and.stub();
+              jest.spyOn(wrapper.vm, 'reorderItem').mockImplementation(() => {});
               document.body.classList.add('is-dragging');
 
               wrapper.vm.handleDragOnEnd({
@@ -269,7 +271,7 @@ describe('RelatedItemsTree', () => {
             });
 
             it('does not call `reorderItem` action when newIndex is same as oldIndex', () => {
-              spyOn(wrapper.vm, 'reorderItem').and.stub();
+              jest.spyOn(wrapper.vm, 'reorderItem').mockImplementation(() => {});
 
               wrapper.vm.handleDragOnEnd({
                 oldIndex: 0,
@@ -280,7 +282,7 @@ describe('RelatedItemsTree', () => {
             });
 
             it('calls `reorderItem` action when newIndex is different from oldIndex', () => {
-              spyOn(wrapper.vm, 'reorderItem').and.stub();
+              jest.spyOn(wrapper.vm, 'reorderItem').mockImplementation(() => {});
 
               wrapper.vm.handleDragOnEnd({
                 oldIndex: 1,
@@ -288,8 +290,8 @@ describe('RelatedItemsTree', () => {
               });
 
               expect(wrapper.vm.reorderItem).toHaveBeenCalledWith(
-                jasmine.objectContaining({
-                  treeReorderMutation: jasmine.any(Object),
+                expect.objectContaining({
+                  treeReorderMutation: expect.any(Object),
                   parentItem: wrapper.vm.parentItem,
                   targetItem: wrapper.vm.children[1],
                   oldIndex: 1,
@@ -330,13 +332,15 @@ describe('RelatedItemsTree', () => {
     describe('methods', () => {
       describe('handleShowMoreClick', () => {
         it('sets `fetchInProgress` to true and calls `fetchNextPageItems` action with parentItem as param', () => {
-          spyOn(wrapper.vm, 'fetchNextPageItems').and.callFake(() => new Promise(() => {}));
+          jest
+            .spyOn(wrapper.vm, 'fetchNextPageItems')
+            .mockImplementation(() => new Promise(() => {}));
 
           wrapper.vm.handleShowMoreClick();
 
           expect(wrapper.vm.fetchInProgress).toBe(true);
           expect(wrapper.vm.fetchNextPageItems).toHaveBeenCalledWith(
-            jasmine.objectContaining({
+            expect.objectContaining({
               parentItem: mockParentItem,
             }),
           );
@@ -354,7 +358,7 @@ describe('RelatedItemsTree', () => {
       });
 
       it('calls `handleShowMoreClick` when `Show more` link is clicked', () => {
-        spyOn(wrapper.vm, 'handleShowMoreClick');
+        jest.spyOn(wrapper.vm, 'handleShowMoreClick').mockImplementation(() => {});
 
         wrapper.find(GlButton).vm.$emit('click');
 

ee/spec/frontend/related_items_tree/store/getters_spec.js

@@ -2,7 +2,7 @@ import * as getters from 'ee/related_items_tree/store/getters';
 import createDefaultState from 'ee/related_items_tree/store/state';
 import { issuableTypesMap } from 'ee/related_issues/constants';
 
-import { mockEpic1, mockEpic2 } from '../../../javascripts/related_items_tree/mock_data';
+import { mockEpic1, mockEpic2 } from '../mock_data';
 
 window.gl = window.gl || {};
 

ee/spec/frontend/related_items_tree/utils/epic_utils_spec.js

@@ -3,11 +3,7 @@ import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 import { PathIdSeparator } from 'ee/related_issues/constants';
 import { ChildType } from 'ee/related_items_tree/constants';
 
-import {
-  mockQueryResponse2,
-  mockEpic1,
-  mockIssue1,
-} from '../../../javascripts/related_items_tree/mock_data';
+import { mockQueryResponse2, mockEpic1, mockIssue1 } from '../mock_data';
 
 describe('RelatedItemsTree', () => {
   describe('epicUtils', () => {