Set up basic Vue component test

Author: jasonvarga

resources/js/tests/components/fieldtypes/TextFieldtype.test.js

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import TextFieldtype from '@/components/fieldtypes/TextFieldtype.vue';
+import TextInput from '@/components/inputs/Text.vue';
+
+test('sets mode', async () => {
+    const wrapper = mount(TextFieldtype, {
+        props: {
+            value: null,
+            handle: 'name',
+        },
+        components: {
+            TextInput,
+        },
+    });
+
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe('');
+    expect(wrapper.emitted('update:value')).toBeUndefined();
+
+    await input.setValue('John');
+    expect(input.element.value).toBe('John');
+    expect(wrapper.emitted('update:value')[0]).toEqual(['John']);
+});

resources/js/tests/setup.js

@@ -0,0 +1,9 @@
+import { config } from '@vue/test-utils';
+
+config.global.directives = {
+    tooltip: () => {},
+};
+
+config.global.mocks = {
+    __: (key) => key,
+};

vite.config.js

@@ -3,6 +3,7 @@ import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 import inject from '@rollup/plugin-inject';
 import svgLoader from 'vite-svg-loader';
+import path from 'path';
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), '');
@@ -28,13 +29,15 @@ export default defineConfig(({ mode }) => {
         resolve: {
             alias: {
                 vue: 'vue/dist/vue.esm-bundler.js',
+                '@': path.resolve(__dirname, 'resources/js'),
             },
         },
         optimizeDeps: {
             include: ['vue'],
         },
         test: {
             environment: 'jsdom',
+            setupFiles: 'resources/js/tests/setup.js',
         },
     };
 });