@ vue/test-utils uses ts language to write type declaration problems encountered in unit tests?

problem description

using Vue Test Utils, to generate wrapper, to call wrapper.vm.getCtModal (), because the ts language is used, the compiler will report that the type declaration of xxxmethod cannot be found, asking how should xxxmethod have a type declaration, or call the method of a vue instance in some other way?

the environmental background of the problems and what methods you have tried

projects created with vue cli 3 write unit tests using the officially recommended @ vue/test-utils reference book, unit tests using typescript language, mocha test framework and chai assertion library

related codes

/ / Please paste the code text below (do not replace the code with pictures)

import { expect } from "chai";
import { shallowMount } from "@vue/test-utils";
import Toast from "@/components/toast/Toast.vue";

describe("Toast.vue", () => {
  it("tips", (done) => {
    const tips = "";
    const wrapper = shallowMount(Toast);
    wrapper.vm.getCtModal("notLoginError");
    wrapper.vm.$nextTick(() => {
      const div = wrapper.find(".loading-title");
      expect(div.text()).to.equal("");
      done();
    });
  });
});
Aug.28,2021

I haven't used vue unit tests, but I think I should know how to solve the type declaration problem.

take a brief look, the component you want to test is the Toast,wrapper.vm is the Toast instance.

so I think it should be solved like this:

const wrapper = shallowMount(Toast);
const vm: Toast = wrapper.vm as Toast;   //wrapper.vmToast
vm.getCtModal('notLoginError');

//....

I remember that ts has two ways to assert data types, one is pre-< type >, and the other is as.
so, as long as there is a corresponding method on your Toast, you can also assert that wrapper.vm is a Toast instance:

(wrapper.vm as Toast).getCtModal('notLoginError');

or

(<Toast>(wrapper.vm)).getCtModal('notLoginError');

I didn't test it. I think it should be able to solve the problem. No, no, no.

however, it makes sense that Vue Test Utils these toollibraries should have their own declaration files. They should declare the vm property on the wrapper class as any or something, why there is a type checking error.


there seems to be no good way to solve the above problems.

reference method 1

reference method 2


Thank you for the answer provided by @ 695954085 upstairs. The discussion is in English. Let me summarize it roughly:

  • assert wrapper.vm as any
const wrapper: Wrapper<yourComponent & { [key: stirng]: any}> =
    mount(yourComponent);
Menu