how to test nuxt plugins

[DarlanPrado]

I created a Nuxt module, nuxt-yup (https://www.npmjs.com/package/nuxt-yup), and I wanted to test it.
This module allows accessing Yup using it either as a plugin ($yup) or as a composable (useYup).
I wanted to test its actual behavior directly. I saw some approaches using mocks, but what I wanted to validate is whether it behaves as expected according to Yup.

I couldn’t find a way to do this, so I created my own approach using fixtures as a base.

I created an app.vue like this:

<template>
  <div>
    <p v-for="(value, key) in checks" :key="key">
      {{ `${key}: ${value}` }}
    </p>
  </div>
</template>

<script setup>
const yup = useYup()

const yupTest = async (schemaObject, data) => {
  const schema = yup.object(schemaObject)
  try {
    await schema.validate(data)
    return `true`
  }
  catch (e) {
    return `false -> ${e.errors[0]}`
  }
}

const checks = {
  stringMinFive: await yupTest(
    { name: yup.string().min(5).required() },
    { name: 'abc' },
  ),

  emailValid: await yupTest(
    { email: yup.string().email().required() },
    { email: 'teste@' },
  ),

  numberMinTen: await yupTest(
    { age: yup.number().min(10).required() },
    { age: 5 },
  ),

  requiredField: await yupTest(
    { username: yup.string().required() },
    { username: '' },
  ),

  arrayMinTwo: await yupTest(
    { items: yup.array().min(2).required() },
    { items: ['one'] },
  ),

  booleanTest: await yupTest(
    { accepted: yup.boolean().oneOf([true]) },
    { accepted: false },
  ),
}
</script>

And to test it, I used the following:

import { fileURLToPath } from 'node:url'
import { describe, it, expect } from 'vitest'
import { setup, $fetch } from '@nuxt/test-utils/e2e'

describe('ssr', async () => {
  await setup({
    rootDir: fileURLToPath(new URL('./fixtures/yup', import.meta.url)),
  })

  it('yup validations', async () => {
    // Get response to a server-rendered page with `$fetch`.
    const html = await $fetch('/')
    expect(html).toContain('stringMinFive: false')
    expect(html).toContain('emailValid: false')
    expect(html).toContain('numberMinTen: false')
    expect(html).toContain('requiredField: false')
    expect(html).toContain('arrayMinTwo: false')
    expect(html).toContain('booleanTest: false')
  })
})

This was the only way I could test it directly, because my whole logic is mounted inside $yup (plugin) and the composable only fetches the plugin from useNuxtApp and returns it.
This is the same approach used by modules like NuxtUI.

I’d like to open a discussion about this and better understand how this is usually done and whether I followed the right path, because it feels a bit heavy to spin up a full Nuxt app just to run this kind of test.

An important point is that I’m targeting a Nuxt module, because that’s the scenario I’m working on, but I believe the approach would be similar if testing this inside a Nuxt application.