diff --git a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
index afa8466d0..bc6dd8655 100644
--- a/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
+++ b/test/vitest/__tests__/components/common/CreateNewCityForm.spec.js
@@ -1,24 +1,13 @@
 // tests/CreateNewCityForm.spec.js
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import CreateNewCityForm from 'path/to/CreateNewCityForm.vue';
-import { useI18n } from 'vue-i18n';
+import CreateNewCityForm from 'src/components/CreateNewCityForm.vue';
 import { Quasar } from 'quasar';
-import { createTestingPinia } from '@pinia/testing';
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-    }),
-}));
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
 describe('CreateNewCityForm.vue', () => {
     it('renders the form correctly', () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         expect(wrapper.find('form').exists()).toBe(true);
         expect(wrapper.find('input[name="cityName"]').exists()).toBe(true);
@@ -27,11 +16,7 @@ describe('CreateNewCityForm.vue', () => {
     });
 
     it('emits onDataSaved when form is submitted', async () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         const form = wrapper.find('form');
         await form.trigger('submit.prevent');
@@ -40,21 +25,13 @@ describe('CreateNewCityForm.vue', () => {
     });
 
     it('calls t function from useI18n', () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         expect(wrapper.vm.t).toBeDefined();
     });
 
     it('updates city data correctly', async () => {
-        const wrapper = mount(CreateNewCityForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewCityForm);
 
         const cityNameInput = wrapper.find('input[name="cityName"]');
         await cityNameInput.setValue('New City');
diff --git a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
index 4f1f03554..24e3a9006 100644
--- a/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
+++ b/test/vitest/__tests__/components/common/CreateNewPostcodeForm.spec.js
@@ -1,24 +1,13 @@
 // tests/CreateNewPostcodeForm.spec.js
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import CreateNewPostcodeForm from 'path/to/CreateNewPostcodeForm.vue';
-import { useI18n } from 'vue-i18n';
+import CreateNewPostcodeForm from 'src/components/CreateNewPostcodeForm.vue';
 import { Quasar } from 'quasar';
-import { createTestingPinia } from '@pinia/testing';
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-    }),
-}));
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
 describe('CreateNewPostcodeForm.vue', () => {
     it('renders the form correctly', () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         expect(wrapper.find('form').exists()).toBe(true);
         expect(wrapper.find('input[label="Postcode"]').exists()).toBe(true);
@@ -28,11 +17,7 @@ describe('CreateNewPostcodeForm.vue', () => {
     });
 
     it('calls onDataSaved when form is submitted', async () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
         await formModelPopup.vm.$emit('onDataSaved', { code: '12345' });
@@ -42,11 +27,7 @@ describe('CreateNewPostcodeForm.vue', () => {
     });
 
     it('updates town when a new city is created', async () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         const createNewCityForm = wrapper.findComponent({ name: 'CreateNewCityForm' });
         const newTown = { id: 1, name: 'New Town', provinceFk: 2 };
@@ -56,11 +37,7 @@ describe('CreateNewPostcodeForm.vue', () => {
     });
 
     it('fetches provinces and towns when country changes', async () => {
-        const wrapper = mount(CreateNewPostcodeForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewPostcodeForm);
 
         wrapper.vm.postcodeFormData.countryFk = 1;
         await wrapper.vm.$nextTick();
diff --git a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
index 785bd9bca..70b166a3c 100644
--- a/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
+++ b/test/vitest/__tests__/components/common/CreateNewProvinceForm.spec.js
@@ -1,24 +1,13 @@
 // tests/CreateNewProvinceForm.spec.js
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import CreateNewProvinceForm from 'path/to/CreateNewProvinceForm.vue';
-import { useI18n } from 'vue-i18n';
+import CreateNewProvinceForm from 'src/components/CreateNewProvinceForm.vue';
 import { Quasar } from 'quasar';
-import { createTestingPinia } from '@pinia/testing';
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-    }),
-}));
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
 describe('CreateNewProvinceForm.vue', () => {
     it('renders the form correctly', () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         expect(wrapper.find('form').exists()).toBe(true);
         expect(wrapper.findComponent({ name: 'VnInput' }).exists()).toBe(true);
@@ -26,11 +15,7 @@ describe('CreateNewProvinceForm.vue', () => {
     });
 
     it('emits onDataSaved when form is submitted', async () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         const formModelPopup = wrapper.findComponent({ name: 'FormModelPopup' });
         await formModelPopup.vm.$emit('onDataSaved', { name: 'New Province' });
@@ -40,21 +25,13 @@ describe('CreateNewProvinceForm.vue', () => {
     });
 
     it('calls t function from useI18n', () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         expect(wrapper.vm.t).toBeDefined();
     });
 
     it('updates province data correctly', async () => {
-        const wrapper = mount(CreateNewProvinceForm, {
-            global: {
-                plugins: [Quasar, createTestingPinia()],
-            },
-        });
+        const wrapper = createWrapper(CreateNewProvinceForm);
 
         const provinceNameInput = wrapper.findComponent({ name: 'VnInput' });
         await provinceNameInput.setValue('New Province');
diff --git a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
index 7d708a074..459e400b3 100644
--- a/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
+++ b/test/vitest/__tests__/components/common/VnSelectProvince.spec.js
@@ -1,34 +1,35 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import VnSelectProvince from './VnSelectProvince.vue';
+import VnSelectProvince from 'src/components/VnSelectProvince.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
+import { createWrapper, axios } from 'app/test/vitest/helper';
 
-vi.mock('components/FetchData.vue', () => ({
-    default: {
-        name: 'FetchData',
-        template: '<div><slot></slot></div>',
-    },
-}));
+// vi.mock('components/FetchData.vue', () => ({
+//     default: {
+//         name: 'FetchData',
+//         template: '<div><slot></slot></div>',
+//     },
+// }));
 
-vi.mock('components/common/VnSelectDialog.vue', () => ({
-    default: {
-        name: 'VnSelectDialog',
-        template: '<div><slot></slot><slot name="form"></slot></div>',
-    },
-}));
+// vi.mock('components/common/VnSelectDialog.vue', () => ({
+//     default: {
+//         name: 'VnSelectDialog',
+//         template: '<div><slot></slot><slot name="form"></slot></div>',
+//     },
+// }));
 
-vi.mock('./CreateNewProvinceForm.vue', () => ({
-    default: {
-        name: 'CreateNewProvinceForm',
-        template: '<div></div>',
-    },
-}));
+// vi.mock('./CreateNewProvinceForm.vue', () => ({
+//     default: {
+//         name: 'CreateNewProvinceForm',
+//         template: '<div></div>',
+//     },
+// }));
 
 describe('VnSelectProvince.vue', () => {
     it('renders correctly with default props', () => {
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,
@@ -39,7 +40,7 @@ describe('VnSelectProvince.vue', () => {
 
     it('calls fetch method on countryFk change', async () => {
         const fetchMock = vi.fn();
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,
@@ -58,7 +59,7 @@ describe('VnSelectProvince.vue', () => {
     });
 
     it('emits onProvinceCreated event when a new province is created', async () => {
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,
@@ -71,7 +72,7 @@ describe('VnSelectProvince.vue', () => {
     });
 
     it('updates provincesOptions when handleProvinces is called', async () => {
-        const wrapper = mount(VnSelectProvince, {
+        const wrapper = createWrapper(VnSelectProvince, {
             props: {
                 countryFk: 1,
                 provinceSelected: 2,