Unit-Test steigt aus

[Gunnar Bittersmann]

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 🖖

[1unitedpower]

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?

[Gunnar Bittersmann]

@@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 🖖

[Lorenz Neumann]

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

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

[Lorenz Neumann]

Hast Du mal ausprobiert, ob das funktioniert?

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Felix Riesterer]

Lieber Gunnar,

  export default {
    name: 'MyComponent',
  };

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

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@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.)

Auch in Arrays:

Wobei:

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

LLAP 🖖

[Tabellenkalk]

Hallo,

PITA.

Paranormal Investigation Team of Atlanta?

Gruß
Kalk

[Christian Kruse]

Hallo Tabellenkalk,

PITA.

Paranormal Investigation Team of Atlanta?

Pain In The Ass.

Freundliche Grüße,
Christian Kruse

[Tabellenkalk]

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

[MudGuard]

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

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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

LLAP 🖖

[Der Martin]

Hallo Gunnar,

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