Component Testing - Option for loading plugins and modules in NuxtJS

[rklos]

What would you like?

For now, component testing in cypress doesn't load up plugins and modules listed in nuxt.config.js file when used with NuxtJS framework.

It will be nice to have an option to include NuxtJS plugin or module inside tests.

There is a way to load "pure Vue" plugins in @cypress/vue package, but NuxtJS modules and plugins have different interface and approach.

• Modules can import many plugins, change runtime configuration and do some other stuff in meantime
• Plugins can be made for server side, client side or both. It can can extend Vue, register global components, but it can also do other things, such as adding HTML code to the DOM tree, sending a request to the server, deciding to redirect the user to another URL and many other stuff not necessarily related to Vue.

So we need dedicated option for loading extensions made for NuxtJS.

Why is this needed?

Most of components in my project depend on many different modules imported into NuxtJS in nuxt.config.js.

For example, my component uses dayjs from this module: https://www.npmjs.com/package/@nuxtjs/dayjs. For now component testing throws errors because of undefined this.$dayjs.

Another example: almost every of my component contains at least one child component from Vuetify module (https://www.npmjs.com/package/@nuxtjs/vuetify). Now in each test, part of HTML template is not rendered due to missing components from the Vuetify module. I use nearly all of them, so mocking almost the entire library seems hard and impossible to maintain.

Some of NuxtJS modules/plugins has their equivalents in "pure Vue" (and can be used as a normal plugin inside @cypress/vue, but this sometimes requires installing a separate package just for testing purposes). But there are some extensions that are made especially for Nuxt, and we will have to do some odd hacky workarounds (that are sometimes almost impossible without forking and exporting some stuff outside the module).

Anyway, if cypress have an option to select Nuxt as a framework inside Component Testing settings, I will expect that as basic stuff as plugins and modules in Nuxt will work without any advanced hacks and workarounds.

Other

Steps to reproduction:

1. Use official Nuxt2+Cypress sample app (https://github.com/cypress-io/cypress-component-testing-apps/tree/main/vue2-nuxt2-js)
2. Install any module (for example https://www.npmjs.com/package/@nuxtjs/dayjs)
3. Use that module inside component
4. See error at component test

[bademiya5306]

has anyone cracked this?

[rklos]

Can anyone investigate this topic?

[bbialas]

+1

[JasonLandbridge]

Bump!

I'm having the same issue where @nuxtjs/i18n isn't loaded which messes up components that use translations

[alexanderop]

Bump!

I also have the same problem with a nuxt 2 project that is using

'@nuxtjs/composition-api/module',

[limtaegeun]

Me too! same problem using @nuxtjs/composition-api/module in nuxt 2 project

[Jicmou]

+1 here. Trying to install cypress on an existing project with multiple plugins.

[mcmc4519]

+1 there.

Realy need this function

[EtiennePASSOT]

+1

[mcmc4519]

I wanna to share example of my code

I use vuetify, axios and event bus

import './commands';

import axios from 'axios';
import { mount } from 'cypress/vue2';

import Vuetify from 'vuetify';
import Vue from 'vue';
Vue.use(Vuetify);
import '../../../client/assets/app.css';
import 'vuetify/dist/vuetify.min.css';
import { VApp } from 'vuetify/lib/components/VApp';
const vuetifyOptions = {};
import applyConverters from 'axios-case-converter';

Cypress.Commands.add('mount', (component, args) => {
    const axiosPlugin = {
        install(app) {
            app.prototype.$axios = axios;
        },
    };

    const busPlugin = {
        install(app) {
            app.prototype.$bus = new Vue();
        },
    };

    args = args || {};
    applyConverters(axios, {
        ignoreHeaders: true,
    });

    args.extensions = args.extensions || {};
    args.extensions.plugins = args.extensions.plugins || [];
    args.extensions.plugins.push(axiosPlugin);
    args.extensions.plugins.push(busPlugin);

    args.vuetify = new Vuetify(vuetifyOptions);

    // return mount(component, args);

    return mount({ render: h => h(VApp, [h(component, args)]) }, args);
});