Gunnar Bittersmann: Unit-Test steigt aus

Wenn ich eine Vue-Komponente MyComponent.vue habe:

<template><svg xmlns="http://www.w3.org/2000/svg"></svg></template>

<script type="text/babel">

  export default {
    name: 'MyComponent',
  };

</script>

Funktioniert so.

Nun habe ich aber

<template><MyIcon /></template>

<script type="text/babel">

  import MyIcon from '@/assets/my-icon.svg';

  export default {
    name: 'MyComponent',
  };

</script>

mit my-icon.svg:

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Dabei steigt der Unit-Test (Jest) aus mit:
TypeError: Cannot create property '_Ctor' on string 'options'

Kenn jemand das Phänomen?

LLAP 🖖

--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
  1. Dabei steigt der Unit-Test (Jest) aus mit:
    TypeError: Cannot create property '_Ctor' on string 'options'

    Kenn mich mit Vue nur oberflächlich aus, aber wie sieht denn der Unit-Test aus?

    1. @@1unitedpower

      Kenn mich mit Vue nur oberflächlich aus, aber wie sieht denn der Unit-Test aus?

      Der muss, um schon nicht zu funktionieren, erstmal (fast) gar nichts tun:

      import { mount } from '@vue/test-utils';
      import MyComponent from '@/views/MyComponent.vue';
      
      describe('MyComponent', () => {
      
        it('is Vue instance', () => {
          const wrapper = mount(MyComponent);
          expect(wrapper.isVueInstance()).toBeTruthy();
        });
      
      });
      

      LLAP 🖖

      --
      Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
  2. Ich denke du musst die Icon Component noch registrieren. Kannst du das probieren?

    export default {
        name: 'MyComponent',
        components: {
          'my-icon': MyIcon,
    }
      };
    
    1. Hast Du mal ausprobiert, ob das funktioniert?

    2. @@Lorenz Neumann

      Sorry, dass ich mich erst jetzt wieder damit befasse.

      Ich denke du musst die Icon Component noch registrieren. Kannst du das probieren?

      export default {
          name: 'MyComponent',
          components: {
            'my-icon': MyIcon,
      }
        };
      

      Ja, das fehlte noch. Macht aber keinen Unterschied.

      LLAP 🖖

      --
      Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
      1. @@Gunnar Bittersmann

        Sorry, dass ich mich erst jetzt wieder damit befasse.

        So ganz bin ich aber noch nicht bei der Sache‽

        Ich denke du musst die Icon Component noch registrieren.

        Ja, das fehlte noch. Macht aber keinen Unterschied.

        Macht natürlich einen Unterschied. Ich hatte es hier im Beispielcode vergessen.

        Die eingangs gezeigte Fehlermeldung kommt, wenn die Componente registriert ist.

        LLAP 🖖

        --
        Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
  3. Lieber Gunnar,

      export default {
        name: 'MyComponent',
      };
    

    liegt es auch wirklich nicht am Komma nach dem letzten Element?

    Liebe Grüße

    Felix Riesterer

    1. @@Felix Riesterer

        export default {
          name: 'MyComponent',
        };
      

      liegt es auch wirklich nicht am Komma nach dem letzten Element?

      Nein. So wie in CSS am Ende einer Regelmenge ein Semikolon erlaubt ist, ist auch in JavaScript ein Komma am Ende in Objekten erlaubt. (Das mag nicht immer so gewesen sein, aber Uralt-Browser seien hier mal egal.)

      object = { one: 1, two: 2, three: 3, }; → Object { one: 1, two: 2, three: 3 }

      Auch in Arrays:

      array = [ 1, 2, 3, ]; → Array(3) [ 1, 2, 3 ]

      Wobei:

      array = [ 1, 2, 3,,, ]; → Array(3) [ 1, 2, 3, undefined, undefined ]

      Nur in JSON darf man das (noch) nicht. PITA.

      LLAP 🖖

      --
      Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
      1. Hallo,

        PITA.

        Paranormal Investigation Team of Atlanta?

        Gruß
        Kalk

        1. Hallo Tabellenkalk,

          PITA.

          Paranormal Investigation Team of Atlanta?

          Pain In The Ass.

          Freundliche Grüße,
          Christian Kruse

          1. Hallo,

            Pain In The Ass.

            Ah, ok? Hätte nicht erwartet, dass JSONs intolerante Syntax-Regeln Schmerzen an solch rektalen Lokalitäten verursachten…

            Gruß
            Kalk

            1. Hi,

              Pain In The Ass.

              Ah, ok? Hätte nicht erwartet, dass JSONs intolerante Syntax-Regeln Schmerzen an solch rektalen Lokalitäten verursachten…

              JSON geht damit in die Analen ein 😉

              cu,
              Andreas a/k/a MudGuard

      2. @@Gunnar Bittersmann

        object = { one: 1, two: 2, three: 3, }; → Object { one: 1, two: 2, three: 3 }

        Go home, syntax highlighting in Firefox’s developer tool, you’re drunk!

        LLAP 🖖

        --
        Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
        1. Hallo Gunnar,

          object = { one: 1, two: 2, three: 3, }; → Object { one: 1, two: 2, three: 3 }

          Go home, syntax highlighting in Firefox’s developer tool, you’re drunk!

          komm, nu' mecker nicht! Ist doch immerhin schön bunt.
          Fehlen nur noch ein paar rosa Elefanten. :-)

          Ciao,
           Martin

          --
          Ich stamme aus Ironien, einem Land am sarkastischen Ozean.