web-dev-qa-db-fra.com

Vue.js Vuetify, Problème lors de l'exécution de mon premier test unitaire avec Jest

Herea est mon premier test:

Heading.spec.js

    import Vuetify from "vuetify";
    import { shallowMount, createLocalVue } from "@vue/test-utils";
    import router from "@/router";
    import i18n from "@/locales";
    import Heading from "@/components/Home/Heading.vue";

    describe("Heading.vue", () => {
      let wrapper;

      beforeEach(() => {
        const localVue = createLocalVue()
        localVue.use(router)
        localVue.use(Vuetify)
        localVue.filter("translate", function(value) {
          if (!value) return "";
          value = "lang.views.global." + value.toString();
          return i18n.t(value);
        });

        wrapper = shallowMount(Heading, { localVue: localVue, router, i18n });
      });

      it("should contains default heading", () => {
        console.log ('WRAPPER: ', wrapper)
        // const heading = wrapper.find("h1");
        // expect(heading.text()).toContain("In the heart of Charentes...");
      });
    });

quand je l'exécute, j'obtiens des erreurs avec Vuetify ...

console.log

    vue-cli-service test:unit

     PASS  tests/unit/Heading.spec.js (11.247s)
      Heading.vue
        ✓ should contains default heading (462ms)

      console.log tests/unit/Heading.spec.js:23
        WRAPPER:  undefined

      console.error node_modules/vuetify/dist/vuetify.js:19429
        [Vuetify] Multiple instances of Vue detected
        See https://github.com/vuetifyjs/vuetify/issues/4068

        If you're seeing "$attrs is readonly", it's caused by this

      console.error node_modules/vuetify/dist/vuetify.js:19429
        [Vuetify] Multiple instances of Vue detected
        See https://github.com/vuetifyjs/vuetify/issues/4068

        If you're seeing "$attrs is readonly", it's caused by this

      console.error node_modules/vue/dist/vue.runtime.common.js:589
        [Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object.

        found in

        ---> <VParallax>
               <Heading>
                 <Root>

    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 total
    Time:        17.641s
    Ran all test suites.

pourquoi ai-je plusieurs instances de Vue détectées? c'est défini une fois dans mon test ... c'est tout?

le test passe, mais je ne comprends pas les erreurs Vuetify .... merci pour les commentaires

unit-testingvue.jsjestjsvuetify.js
14
user762579

Résolu en n'utilisant pas de valeur locale:

import Vue from "vue";
import { mount } from "@vue/test-utils";
import router from "@/router";
import Vuetify from "vuetify";
import i18n from "@/locales";
import Heading from "@/components/Home/Heading.vue";

describe("Heading.vue", () => {
  let wrapper;

  beforeEach(() => {
    Vue.use(router);
    Vue.use(Vuetify);
    Vue.filter("translate", function(value) {
      if (!value) return "";
      value = "lang.views.global." + value.toString();
      return i18n.t(value);
    });

    wrapper = mount(Heading, { router, i18n });
  });

  it('should have a happy ending', () => {
    // You should see all Vuetify components properly rendered
    // as normal HTML tags. For example, <v-flex> should be
    // rendered as <div class="v-flex ...">
    expect(wrapper.contains('div.flex')).toBe(true);

    // Just so that you can visually inspect the rendered html.
    console.log(wrapper.find('.subheading').html());
  });

  it("should contains default heading", () => {
    const h1 = wrapper.find("h1");
    expect(h1.is("h1")).toBe(true);
    expect(h1.text()).toContain("In the heart of Charentes...");
  });
});

Mise à jour: Voici une référence à le bug officiel de Vuetify , gracieuseté de Tristan Neumann .

15
user762579