Please provide a working more complex example

[QozbroQqn]

Hi

tldr:
I am looking for a working test environment for nuxt 3 and vuetify (or any other ui framework). Maybe someone has one up and running with a few examples mounting a component and is willing to share it?

long:
I am having a hard time getting vitest running with my project. The examples provided in the docs of vitest, jest and nuxt-vitest work with really simple apps. But I have a more complex setup:

• nuxt 3
• pinia
• vuetify 3
• i18n
• graphql
• strapi

I actually do not know which of the parts does not work because I can't mount the simplest login form. Vitest does not find any of the vuetify components and also not the i18n $t. It surely is a problem with my config files:

// vitest.config.ts
import { defineVitestConfig } from 'nuxt-vitest/config';

export default defineVitestConfig({
  test: {
      globals    : true,
  },
});

// nuxt.config.ts
export default defineNuxtConfig({
  //...

  build: {
    transpile: [ 'vuetify' ],
  },

  modules: [
    [ '@pinia/nuxt', { autoImports: [ 'defineStore' ] } ],
    '@nuxtjs/i18n',
    '@vueuse/nuxt',
    '@nuxtjs/eslint-module',
    'nuxt-vitest',
  ],
  
  vite: {
    ssr   : {
      noExternal: [ 'vuetify' ],
    },
    define: {
      'process.env.DEBUG': false,
    },
  },

  //...
}

// ~/components/TestForm.vue
<template>
    <v-container>
        <div class="mb-5">
            <h1
                class="mb-5"
                v-text="t('login_form.title', { title: t('app.title') })"
            />
        </div>
    </v-container>
</template>

<script setup lang="ts">
import { SubmitEventPromise } from 'vuetify';
import { useUserstore } from '~/stores/user';

const user         = useUserstore();
const { t }        = useI18n();

const formSubmit = async (event: SubmitEventPromise) => {
  const { valid } = await event;
  if (!valid) return;
  
  user.isAuthenticated = true;
  navigateTo('/');
};
</script>

// login.nuxt.spec.ts
import { mountSuspended } from 'vitest-environment-nuxt/utils';
import { mount } from '@vue/test-utils';
import { useAuthenticator } from '~/composables/authenticator';
import TestForm from '~/components/TestForm.vue';

describe('Login Page', () => {
  describe('Layout', () => {
    it('test', () => {
      const app                 = useNuxtApp();
      const { isAuthenticated } = useAuthenticator();
      const authenticated                 = isAuthenticated();
      
      // Both doesnt work
      const component = mountSuspended(TestForm)
      // const component = mount(LoginForm)
    });
  });
});

Errors:
TypeError: $setup.t is not a function
at ~\components\TestForm.vue:5:23

Warn:
[Vue warn]: Failed to resolve component: v-container

[danielroe]

You can look at https://github.com/elk-zone/elk, perhaps?

[QozbroQqn]

Thank you for your fast response but unfortunately elk is not mounting anything inside his test environment. The tests performed are exactly the ones I can do aswell.

Maybe I have a wrong idea of how to test a nuxt webapp because I am coming from PHP and Codeception but how do I test this use case scenario:

1. User is on login page and sees input fields: name, password and submit button
2. click on submit authenticates user (auth function is called, if form is validated)

From the docs I know I can test 1. with $fetch. I do this already but I don't like it because I have to compare via regex. I dont like the idea getting a test failure just because someone (or something like prettier) has changed the order of properties for an element.

I am used to query for elements like in the Vue Testing Library. But I cannot mount/render my components.

In 2. the authentication is done via a composable useAuthenticator. This one is tested really easy. But I cannot test: click calls auth func. Or any other function which is implemented inside a component.