Forem: BlackSlash

Harnessing the Power of Nuxt3 Auto-Imports in Testing with Vite and Vue Test Utils

BlackSlash — Tue, 19 Sep 2023 21:59:12 +0000

Welcome to the first installment of our series on Nuxt 3's Auto-Imports feature. In this article, we'll explore how to effectively handle Auto-Imports when writing tests using Vite and Vue Test Utils. Auto-Imports is a game-changing feature in Nuxt 3, streamlining the way we import components, modules, and plugins, thus significantly enhancing code maintainability and readability. However, when it comes to testing, especially in the context of Vite and Vue Test Utils, there are some nuances to consider.

Understanding Nuxt 3 Auto-Imports

Auto-Imports in Nuxt 3 represent a leap forward in development efficiency. They empower developers to utilize components, modules, and plugins without the need for verbose import statements, resulting in cleaner code and reduced boilerplate. However, as we'll discover, testing Auto-Imported components can present unique challenges.

Testing with Vite and Vue Test Utils

Testing components that leverage Auto-Imports can be tricky, primarily because these components are not explicitly imported in your test files. Let's delve into how to overcome this challenge.

Suppose we have a straightforward Nuxt 3 project structure with an index page and a component:

<!-- ./pages/index.vue -->
<template>
  <div>Hello world</div>
  <MyComponent />
</template>

<!-- ./components/MyComponent.vue -->
<template>
  <div>I'm an awesome component</div>
</template>

Now, let's create a test file for the index page:

// ./__tests__/pages/index.spec.ts
import { describe, test, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Index from './pages/index.vue';

describe('My index page test', async () => {
  test('default text should be shown', () => {
    const wrapper = mount(Index);

    expect(wrapper.text()).toContain('Hello world');
  });

  test('MyComponent component should exist', () => {
    const wrapper = mount(Index);

    expect(wrapper.text()).toContain(`I'm an awesome component`);
  });
});

In this test setup, we are using vitest and @vue/test-utils for unit testing. However, as you might have noticed, the test for MyComponent fails with an error because vitest is not aware of Nuxt's Auto-Imports.

Maintaining Auto-Imports and Making Tests Pass

To ensure your tests run smoothly you can:

Explicit Import of the Component: In your Nuxt page file (./pages/index.vue in this case), explicitly import the Auto-Imported component.

<!-- ./pages/index.vue -->
<template>
  <div>Hello world</div>
  <MyComponent />
</template>

<script lang="ts">
import MyComponent from '~/components/MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

By explicitly importing MyComponent and registering it within the components object, but broking the Auto-Imports functionality while allowing the component to be recognized in tests.

After this adjustment, your tests will pass, but you loose the benefits from Auto-Imports:

✓ __test__/pages/index.spec.ts (2)
  ✓ My index page test (2)
    ✓ default text should be shown
    ✓ MyComponent component should exist

Test Files  1 passed (1)
     Tests  2 passed (2)

Enhancing Test Configuration with unplugin-vue-components

To further streamline testing with Auto-Imports, you can utilize the unplugin-vue-components library. Here's how to set it up:

unplugin-vue-components

Install the library

❯ npm i unplugin-vue-components -D

Update your vitest.config.ts configuration file to include unplugin-vue-components. Make sure to import the necessary modules:

import Components from 'unplugin-vue-components/vite';
import vue from '@vitejs/plugin-vue';

Add unplugin-vue-components to your Vite plugins:

  plugins: [vue(), Components({ dirs: ['./components'] })],

The complete config file should looks like this

import * as path from 'path';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vitest/config';
import Components from 'unplugin-vue-components/vite';

const r = (p: string) => path.resolve(__dirname, p);

export default defineConfig({
  plugins: [vue(), Components({ dirs: ['./components'] })],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      '~': r('.'),
    },
  },
});

Remove unnecessary imports from index page and run tests again.

 ✓ __test__/pages/index.spec.ts (2)
   ✓ My index page test (2)
     ✓ default text should be shown
     ✓ MyComponent component should exists

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  18:30:31
   Duration  922ms (transform 0ms, setup 1ms, collect 98ms, tests 24ms, environment 411ms, prepare 75ms)

With this setup, unplugin-vue-components handles Auto-Imports in your tests, allowing them to run seamlessly while preserving the benefits of Auto-Imports.

Conclusion

Auto-Imports in Nuxt 3 provide a remarkable boost to development efficiency, making your code cleaner and more maintainable. When it comes to testing, it's essential to adapt your testing strategies to accommodate Auto-Imports effectively. Whether you choose to explicitly import components or utilize libraries like unplugin-vue-components, you can ensure your tests pass with flying colors while enjoying the advantages of Auto-Imports.

Stay tuned for the next articles in this series, where we'll dive deeper into handling Auto-Imports for other types of resources like stores and composables. Until then, happy testing and keep coding!

Integrate reCaptcha V3 on Nuxt3 app

BlackSlash — Wed, 15 Feb 2023 19:47:11 +0000

“CAPTCHA” stands for “Completely Automated Public Turing test to tell Computers and Humans Apart”

ReCAPTCHA is a free CAPTCHA system provided by Google and by adding reCAPTCHA to a site, web hosts can distinguish between human and automated access, which enables them to block automated software while helping their welcome users to enter with ease.

But if you are here you know what's ReCAPTCHA and how it works... the problem here is the integration with our loved Nuxt3

Nuxt uses a plugins systems that allow us to extend our App functionalities:

Allow functions to be available on client-side and server-side
Using. your favorite Vue.js plugins in your Nuxt application
User external packages and modules.

How it works

Just creating the plugin file inside the plugins folder is enough. Nuxt does it all for you. Pretty comfortable not you?
More info here

ReCaptchaV3

We use the vue-recaptcha-v3 npm package

Install it with npm i vue-recaptcha-v3

Then create a new file on plugins folder, we named it google-recaptcha.ts with the followings:



import { VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: '<YourSiteKey>',
    });
});

We used the new defineNuxtPlugin method from nuxt3, it take only one argument (nuxtApp) and them add the VueReCaptcha module to the use method of vueApp, finally add the site key to the module options and Voila, your app have now ReCaptcha v3.

Reload your app and check that the ReCaptcha badge is shown at the bottom of your site

Customization

The vue-recaptcha-v3 plugin offers optional options to configure the behavior of some parts.



loaderOptions: {
    autoHideBadge: false,
    explicitRenderParameters: {
        badge: 'bottomleft',
    }
},

The entire code looks like the following:



import { VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: '<YourSiteKey>',
        loaderOptions: {
            autoHideBadge: false,
            explicitRenderParameters: {
                badge: 'bottomleft',
            },
        },
    });
});

The available options are described here.

Usage

Well I can see the ReCaptcha badge on my site, what's next?

Now you need to get the token and send it within your requests to be validated against your backend:

To get the reCaptcha token, on your component setup, add the method to get the reCaptcha token



// First import the useReCaptcha composable
import { useReCaptcha } from 'vue-recaptcha-v3';

export default defineComponent({
    setup() {
        // initialize a instance
        const recaptchaInstance = useReCaptcha();

        const recaptcha = async () => {
            // optional you can await for the reCaptcha load
            await recaptchaInstance?.recaptchaLoaded();

            // get the token, a custom action could be added as argument to the method
            const token = await recaptchaInstance?.executeRecaptcha('yourActionHere');

            return token;
        };

        return {
            recaptcha,
        };
    },
    ...
});

Finally you can use on your own component method



...
methods: {
    async onSubmit(): Promise<void> {
        // get the token on your method
        const token = await this.recaptcha();

        // use the token as your convenience
    }
},
...

And that's it, Google ReCaptcha v3 working on the new Nuxt3

Another resources

Official Nuxt plugins docs