在 Vue Cypress 组件测试中复制插件
P粉725827686
P粉725827686 2023-08-30 19:44:36
[Vue.js讨论组]

我正在使用 Cypress 来组件测试我的 Vue 应用程序。遵循 https://docs.cypress.io/guides/component-testing/vue/examples#Replicating-Plugins 中的代码示例会产生几个错误,如下所列:

Argument of type '(this: Context, component: 
ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, unknown, {}, 
ComputedOptions, Record<string, Function>, ... 7 more ..., { ...; } | {}>, options?: 
MountingOptions<...> | undefined) => Chainable<...>' is not assignable to parameter of type 
'CommandFn<"mount">'.
  Type 'Chainable<{ wrapper: VueWrapper<ComponentPublicInstance<{ [x: number]: unknown; } & { 
readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: 
Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | 
ConcatArray<...>)[]): string[]; } | null | undefin...' is not assignable to type 'void | 
Chainable<{ wrapper: 
VueWrapper<ComponentPublicInstance<ExtractPropTypes<Readonly<ComponentPropsOptions<Data>>>, 
unknown, {}, ComputedOptions, ... 6 more ..., {}>>; component: ComponentPublicInstance<...>; 
}>'. 

Property 'global' does not exist on type '[options?: MountingOptions<{ [x: number]: unknown; } 
& { readonly length?: number | Prop<unknown, unknown> | null | undefined; readonly concat?: 
Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | 
ConcatArray<...>)[]): string[]; } | null | undefined; ... 12 more ...; toLocale...'.

Cannot find name 'Vapp'.

No overload matches this call.
  The last overload gave the following error.

我正在使用 TypeScript。有人可以向我提供一个工作代码片段吗?我的代码如下:

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

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

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, {}, component)
  }, ...args);
});

有人知道如何解决这个问题吗?在测试中使用时我如何调用这个挂载函数?

P粉725827686
P粉725827686

全部回复(1)
P粉561323975

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

import { mount } from "cypress/vue";

Cypress.Commands.add("mount", (component) => {
  return mount(component, {
    global: {
      plugins: [createPinia(), i18n],
    },
  });
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号