我正在尝试测试使用外部依赖项的 SiWizard 组件。它从 syncfusion 库中导入模块。
SiWizard.vue 导入
import SiFooter from "@/components/subComponents/SiFooter.vue";
import { Prop, Component, Vue } from "vue-property-decorator";
import { TabPlugin, TabComponent, SelectingEventArgs } from "@syncfusion/ej2-vue-navigations";
import { VNode } from "vue";
Vue.use(TabPlugin);
这就是我的测试的样子,使用 vue js test utils 和 jest。为了简单起见,我的测试用例应该通过并配置一个道具。
siWizard.spec.ts
import { shallowMount, Wrapper } from "@vue/test-utils";
import SiWizard from "../../src/components/SiWizard.vue";
let wrapper: Wrapper<SiWizard & { [key: string]: any }>;
describe("testing SiWizard", () => {
test("Test add mode", () => {
wrapper = shallowMount(SiWizard, {
propsData: {
mode: "add"
}
});
expect(true).toBe(true)
});
运行 siWizard.spec.ts 时出现奇怪的错误。 没有嘲笑的错误,测试仍然通过
我的猜测是测试环境中的属性无法访问 SiWizard 组件中使用的依赖属性。因此,我必须使用 Jest 来模拟 TabPlugin。所以我尝试使用 jest.mock 来模拟依赖。
import { shallowMount, Wrapper } from "@vue/test-utils";
import SiWizard from "../../src/components/SiWizard.vue";
// import { TabPlugin } from "@syncfusion/ej2-vue-navigations";
jest.mock("../../node_modules/@syncfusion/ej2-navigations" , () => { jest.fn() });
let wrapper: Wrapper<SiWizard & { [key: string]: any }>;
describe("testing SiWizard", () => {
test("Test add mode", () => {
wrapper = shallowMount(SiWizard, {
propsData: {
mode: "add"
}
});
expect(true).toBe(true)
});
导致测试失败并给出以下错误Error and failed test
我不确定我是否需要模拟任何东西,因为我的第一个测试仍然通过,但它只会给我错误。谁能告诉我我是否正确模拟或者我需要做其他事情吗?