jestHelpers implementation

src/components/__tests__/UserPanel.spec.js

@@ -1,17 +1,7 @@
 import { describe, expect, it, jest } from '@jest/globals';
-import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
+import { createWrapper, axios, flushPromises } from 'app/test/jest/jestHelpers';
-import { mount, flushPromises } from '@vue/test-utils';
-import axios from 'axios';
-import { i18n } from 'src/boot/i18n';
 import UserPanel from '../UserPanel.vue';
-import { Notify } from 'quasar';
 
-// Specify here Quasar config you'll need to test your component
-installQuasarPlugin({
-    plugins: {
-        Notify
-    }
-});
 const mockPush = jest.fn();
 
 jest.mock('vue-router', () => ({
@@ -20,17 +10,6 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-function createWrapper(component) {
-    const wrapper = mount(component, {
-        global: {
-            plugins: [i18n]
-        }
-    });
-    const vm = wrapper.vm;
-
-    return { vm, wrapper };
-}
-
 describe('UserPanel', () => {
     describe('onMounted', () => {
         it('should define the user into state', async () => {

src/pages/Login/__tests__/Login.spec.js

@@ -1,21 +1,8 @@
-import { jest, describe, expect, it } from '@jest/globals';
+import { jest, describe, expect, it, beforeAll } from '@jest/globals';
-import { mount } from '@vue/test-utils';
+import { createWrapper, axios } from 'app/test/jest/jestHelpers';
-import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
-import { i18n } from 'src/boot/i18n';
-import { Notify } from 'quasar';
-import axios from 'axios';
 import Login from '../Login.vue';
 
-// Specify here Quasar config you'll need to test your component
-installQuasarPlugin({
-    plugins: {
-        Notify
-    }
-});
-
-// https://stackoverflow.com/questions/68763693/vue-routers-injection-fails-during-a-jest-unit-test
 const mockPush = jest.fn();
-const mockT = jest.fn();
 
 jest.mock('vue-router', () => ({
     useRouter: () => ({
@@ -23,21 +10,13 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-jest.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: mockT
-    }),
-}));
-
 describe('Login', () => {
-    it('should successfully set the token into session', async () => {
+    let vm;
-        const wrapper = mount(Login, {
+    beforeAll(() => {
-            global: {
+        vm = createWrapper(Login).vm;
-                plugins: [i18n]
+    });
-            }
-        });
-        const { vm } = wrapper;
 
+    it('should successfully set the token into session', async () => {
         jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
         jest.spyOn(vm.quasar, 'notify')
 
@@ -53,13 +32,6 @@ describe('Login', () => {
     });
 
     it('should not set the token into session if any error occurred', async () => {
-        const wrapper = mount(Login, {
-            global: {
-                plugins: [i18n]
-            }
-        });
-        const { vm } = wrapper;
-
         jest.spyOn(axios, 'post').mockRejectedValue(new Error('error'));
         jest.spyOn(vm.quasar, 'notify')
 

test/jest/__tests__/MyButton.spec.js

@@ -1,42 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
-import { mount, shallowMount } from '@vue/test-utils';
-import { QBtn } from 'quasar';
-import MyButton from './demo/MyButton';
-
-// Specify here Quasar config you'll need to test your component
-installQuasarPlugin();
-
-describe('MyButton', () => {
-    it('has increment method', () => {
-        const wrapper = mount(MyButton);
-        const { vm } = wrapper;
-
-        expect(typeof vm.increment).toBe('function');
-    });
-
-    it('can check the inner text content', () => {
-        const wrapper = mount(MyButton);
-        const { vm } = wrapper;
-
-        expect(vm.$el.textContent).toContain('rocket muffin');
-        expect(wrapper.find('.content').text()).toContain('rocket muffin');
-    });
-
-    it('sets the correct default data', () => {
-        const wrapper = mount(MyButton);
-        const { vm } = wrapper;
-
-        expect(typeof vm.counter).toBe('number');
-        expect(vm.counter).toBe(0);
-    });
-
-    it('correctly updates counter when button is pressed', async () => {
-        const wrapper = shallowMount(MyButton);
-        const { vm } = wrapper;
-
-        const button = wrapper.findComponent(QBtn);
-        await button.trigger('click');
-        expect(vm.counter).toBe(1);
-    });
-});

test/jest/__tests__/MyDialog.spec.js

@@ -1,28 +0,0 @@
-import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
-import { beforeEach, describe, expect, it } from '@jest/globals';
-import { DOMWrapper, mount } from '@vue/test-utils';
-import MyDialog from './demo/MyDialog';
-
-installQuasarPlugin();
-
-describe('MyDialog', () => {
-    beforeEach(() => {
-        mount(MyDialog, {
-            data: () => ({
-                isDialogOpen: true,
-            }),
-        });
-    });
-
-    it('should mount the document body and expose for testing', () => {
-        const wrapper = new DOMWrapper(document.body);
-
-        expect(wrapper.find('.q-dialog').exists()).toBeTruthy();
-    });
-
-    it('can check the inner text of the dialog', () => {
-        const wrapper = new DOMWrapper(document.body);
-
-        expect(wrapper.find('.q-dialog').html()).toContain('Custom dialog which should be tested');
-    });
-});

test/jest/__tests__/demo/MyButton.vue

@@ -1,30 +0,0 @@
-<script>
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-    name: 'MyButton',
-    props: {
-        incrementStep: {
-            type: Number,
-            default: 1,
-        },
-    },
-    setup(props) {
-        const counter = ref(0);
-        const input = ref('rocket muffin');
-        function increment() {
-            counter.value += props.incrementStep;
-        }
-
-        return { counter, input, increment };
-    },
-});
-</script>
-
-<template>
-    <div>
-        <p class="content">{{ input }}</p>
-        <span>{{ counter }}</span>
-        <q-btn class="button" @click="increment()"></q-btn>
-    </div>
-</template>

test/jest/__tests__/demo/MyDialog.vue

@@ -1,20 +0,0 @@
-<template>
-    <q-dialog v-model="isDialogOpen">
-        <q-card>
-            <q-card-section>Custom dialog which should be tested</q-card-section>
-        </q-card>
-    </q-dialog>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-    name: 'MyDialog',
-    data() {
-        return {
-            isDialogOpen: false,
-        };
-    },
-});
-</script>

test/jest/jestHelpers.js

@@ -0,0 +1,28 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
+import { i18n } from 'src/boot/i18n';
+import { Notify } from 'quasar';
+import axios from 'axios';
+
+// Specify here Quasar config you'll need to test your component
+installQuasarPlugin({
+    plugins: {
+        Notify
+    }
+});
+
+export function createWrapper(component) {
+    const wrapper = mount(component, {
+        global: {
+            plugins: [i18n]
+        }
+    });
+    const vm = wrapper.vm;
+
+    return { vm, wrapper };
+}
+
+export {
+    axios,
+    flushPromises
+}