1 files changed, 8 insertions, 3 deletions

diff --git a/spec/frontend/frequent_items/components/frequent_items_list_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_spec.js
index 238fd508053..96f73ab1468 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { createStore } from '~/frequent_items/store';
 import frequentItemsListComponent from '~/frequent_items/components/frequent_items_list.vue';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
 import { mockFrequentProjects } from '../mock_data';
@@ -8,6 +9,7 @@ describe('FrequentItemsListComponent', () => {
 
   const createComponent = (props = {}) => {
     wrapper = mount(frequentItemsListComponent, {
+      store: createStore(),
       propsData: {
         namespace: 'projects',
         items: mockFrequentProjects,
@@ -25,7 +27,7 @@ describe('FrequentItemsListComponent', () => {
 
   describe('computed', () => {
     describe('isListEmpty', () => {
-      it('should return `true` or `false` representing whether if `items` is empty or not with projects', () => {
+      it('should return `true` or `false` representing whether if `items` is empty or not with projects', async () => {
         createComponent({
           items: [],
         });
@@ -35,13 +37,14 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           items: mockFrequentProjects,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.isListEmpty).toBe(false);
       });
     });
 
     describe('fetched item messages', () => {
-      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', () => {
+      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', async () => {
         createComponent({
           isFetchFailed: true,
         });
@@ -53,13 +56,14 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           isFetchFailed: false,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.listEmptyMessage).toBe('Projects you visit often will appear here');
       });
     });
 
     describe('searched item messages', () => {
-      it('should return appropriate empty list message based on value of `searchFailed` prop with projects', () => {
+      it('should return appropriate empty list message based on value of `searchFailed` prop with projects', async () => {
         createComponent({
           hasSearchQuery: true,
           isFetchFailed: true,
@@ -70,6 +74,7 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           isFetchFailed: false,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
       });