Cypress component testing with Vue-I18N

Question

I am trying to use Cypress for component testing in my Vue app. I am using the vue-i18n library to provide localisation for the app. When attempting to test the rendering of my loading spinner component, I am getting the following error from the vue-i18n library:

SyntaxError: Need to install with `app.use` function
at createCompileError (http://localhost:5173/__cypress/src/node_modules/.vite/deps/vue-i18n.js?v=64756eb2:183:17)
at createI18nError (http://localhost:5173/__cypress/src/node_modules/.vite/deps/vue-i18n.js?v=64756eb2:2625:10)
at useI18n (http://localhost:5173/__cypress/src/node_modules/.vite/deps/vue-i18n.js?v=64756eb2:4231:11)

Previously to this, I was getting an error from Pinia. I resolved this by adding the following to cypress/support/component.ts:

import { createPinia, setActivePinia } from 'pinia';

setActivePinia(
  createPinia()
);

My LoadingSpinner component code is as follows:

<script setup lang="ts">
import { computed } from "@vue/reactivity";
import { useLocaleStore } from "@/stores/locale";

//props

const { i18n } = useLocaleStore();
</script>

<template>
  <div class="d-flex justify-content-center m-5">
    <div
      class="spinner-border text-primary"
      :style="{ width, height }"
      role="status"
    >
      <span class="visually-hidden">{{ i18n.t("loading") }}</span>
    </div>
  </div>
</template>

And the test code:

import LoadingSpinner from "../../src/components/ui/LoadingSpinner.vue";

describe("LoadingSpinner", () => {
  it("renders", () => {
    cy.mount(LoadingSpinner);
  });
});

/stores/locale:

import { computed } from "vue";
import { defineStore } from "pinia";
import { useI18n } from "vue-i18n";

export const useLocaleStore = defineStore("locale", () => {
  const i18n = useI18n({
    useScope: "global",
    inheritLocale: true,
  });

  const currentLocale = computed(() => i18n.locale);
  const locales = computed(() => i18n.availableLocales);

  return { i18n, currentLocale, locales };
});

I found this github release that implies I need to add vue-i18n as a plugin to the mount() call, but I can't work out how to do it. Does anyone know a solution?

Orbis · Accepted Answer · 2023-04-04 16:39:54Z

1

Cypress.Commands.add('mount', (component, options = {}) => {
  // Setup options object
  options.global = options.global || {}
  options.global.stubs = options.global.stubs || {}
  options.global.stubs.transition = false
  options.global.components = options.global.components || {}
  options.global.plugins = options.global.plugins || []

  // Use store passed in from options, or initialize a new one
  const {/* store = getStore(), */ ...mountOptions} = options

  // Add plugins here
  options.global.plugins.push({
    install(app) {
      app.use(i18n)
    },
  })

  return mount(component, mountOptions)
})

answered Apr 4, 2023 at 16:39

Orbis

5872 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V. Sambor Over a year ago

what is the <app> in your case? What If I'm having a library of components bundled by vite and used by other apps. How can I test that library?

Orbis Over a year ago

this setup is for component testing. The app/index is located at: cypress/support/component-index.html

Collectives™ on Stack Overflow

Cypress component testing with Vue-I18N

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related