Salin pemalam dalam ujian komponen Vue Cypress

Question

Saya menggunakan Cypress untuk menguji komponen aplikasi Vue saya. Mengikuti contoh kod di https://docs.cypress.io/guides/component-testing/vue/examples#Replicating-Plugins akan menghasilkan beberapa ralat, seperti yang disenaraikan di bawah:

Argumen jenis '(ini: Konteks, komponen:
ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, tidak diketahui, {},
ComputedOptions, Rekod<rentetan, Fungsi>, ... 7 lagi ..., { ...;, pilihan?:
MountingOptions<...> undefined) =>
'CommandFn<"mount">'.
  Taip 'Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown } &
panjang baca sahaja?: nombor |. Prop<tidak diketahui>
Prop<tidak diketahui, tidak diketahui> |. { (...item: ConcatArray>[]): rentetan[];
ConcatArray<...>)[]): rentetan[]; } |
boleh dirantai<{ pembungkus:
VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions<Data>>>,
tidak diketahui, {}, ComputedOptions, ... 6 lagi ..., {}>>; komponen: ComponentPublicInstance<...>;
}>'.

'global' harta tidak wujud pada jenis '[options?: MountingOptions<{ [x: number]: unknown }
& { panjang baca sahaja?: nombor |. tidak diketahui>
Prop<tidak diketahui, tidak diketahui> |. { (...item: ConcatArray>[]): rentetan[];
ConcatArray<...>)[]): rentetan[]; } |.

Tidak dapat mencari nama 'Vapp'.

Tiada beban berlebihan sepadan dengan panggilan ini.
  Lebihan beban terakhir memberikan ralat berikut.

Saya menggunakan TypeScript.Bolehkah seseorang memberikan saya coretan kod yang berfungsi? Kod saya adalah seperti berikut:

import { createPinia } daripada "pinia";
import i18n dari "../../src/locales/i18n";
import { mount } daripada "cypress/vue";
import { h } daripada "vue";

mengisytiharkan global {
  ruang nama Cypress {
    antara muka boleh rantai {
      mount: typeof mount;
    }
  }
}

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

  lekapkan kembali(() => {
    kembalikan h(Vapp, {}, komponen)
  }, ...args);
});

Adakah sesiapa tahu cara membetulkannya? Bagaimanakah saya boleh memanggil fungsi pelekap ini apabila menggunakannya dalam ujian?

Answer 1

Saya menyelesaikan masalah ini menggunakan sintaks Vue Test Utils. Dalam /support/component.ts:

import { mount } from "cypress/vue";

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