Kopieren Sie das Plugin in den Vue Cypress-Komponententest

Question

Ich verwende Cypress zum Komponententest meiner Vue-Anwendung. Das Befolgen der Codebeispiele unter https://docs.cypress.io/guides/component-testing/vue/examples#Replicating-Plugins führt zu mehreren Fehlern, wie unten aufgeführt:

Argument vom Typ '(this: Kontext, Komponente:
ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, unbekannt, {},
ComputedOptions, Record<string, Function>, ... 7 weitere ..., { ...>, Optionen?:
MountOptions<...> | undefiniert) => Chainable<...>'
'CommandFn<"mount">'.
  Geben Sie „Chainable<{ Wrapper: VueWrapper<ComponentPublicInstance<{ [x: Zahl]: unbekannt } &
schreibgeschützte Länge?: Zahl |. Prop<unbekannt, unbekannt>
Prop<unbekannt, unbekannt> | { (...items: ConcatArray<string>[]): string[];
ConcatArray<...>)[]): string[]; } |. null |
Chainable<{ Wrapper:
VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions<Data>>>,
unbekannt, {}, ComputedOptions, ... 6 weitere ..., {}>>; Komponente: ComponentPublicInstance<...>;
}>'.

Die Eigenschaft „global“ existiert nicht für den Typ „[options?: MountOptions<{ [x: number]: Unknown;““
& { schreibgeschützte Länge?: Zahl |.
Prop<unbekannt, unbekannt> | { (...items: ConcatArray<string>[]): string[];
ConcatArray<...>)[]): string[];

Der Name „Vapp“ kann nicht gefunden werden.

Zu diesem Aufruf passt keine Überladung.
  Die letzte Überladung ergab den folgenden Fehler.

Ich verwende TypeScript.Kann mir jemand einen funktionierenden Codeausschnitt zur Verfügung stellen? Mein Code lautet wie folgt:

import { createPinia } from "pinia";
i18n aus „../../src/locales/i18n“ importieren;
import { mount } aus „cypress/vue“;
import { h } aus „vue“;

global deklarieren {
  Namensraum Cypress {
    Schnittstelle verkettbar {
      Halterung: Art der Halterung;
    }
  }
}

Cypress.Commands.add("mount", (component, ...args) => {
  args.global = args.global || {};
  args.global.plugins = args.global.plugins ||.
  args.global.plugins.push(createPinia());
  args.global.plugins.push(i18n);

  return mount(() => {
    return h(Vapp, {}, Komponente)
  }, ...args);
});

Weiß jemand, wie man das beheben kann? Wie rufe ich diese Mount-Funktion auf, wenn ich sie in Tests verwende?

Answer 1

我使用 Vue Test Utils 语法解决了这个问题。在 /support/component.ts 中：

import { mount } from "cypress/vue";

Cypress.Commands.add("mount", (component) => {
  return mount(component, {
    global: {
      plugins: [createPinia(), i18n],
    },
  });
});