如何通过使用打字稿在 beforeEach 挂钩中安装 Vue 组件来干燥代码？答案

【问题标题】：How can I DRY up the code by mounting Vue component in the beforeEach hook using typescript?如何通过使用打字稿在 beforeEach 挂钩中安装 Vue 组件来干燥代码？
【发布时间】：2022-01-08 13:49:44
【问题描述】：

这是我的代码。我想把这个案子擦干。

describe("Stored id", () => {

  it("ID empty", () => {

    // when
    const wrapper = mount(SigninPage, options);
    const vm = wrapper.vm;

  });

  it("ID exist", () => {

    // when
    localStorage.setItem(process.env.VUE_APP_SIGNIN_STORED_USER_ID, STORED_ID);
    const wrapper = mount(SigninPage, options);
    const vm = wrapper.vm;

  });

});

如何像使用 typescript 一样使用 beforeEach 钩子？

我想使用 beforeEach 钩子。但由于 tsc，我无法运行测试。我认为当变量类型正确时才有可能。

describe("Stored id", () => {

  // problem
  let wrapper: VueWrapper<??>;
  let vm: ??;

  beforeEach(() => {
    wrapper = mount(SigninPage);
    vm = wrapper.vm;
  });

  it("ID empty", () => {

    // const wrapper = mount(SigninPage, options);
    // const vm = wrapper.vm;

  });

  it("ID exist", () => {

    // Should I save it before the wrapper is mounted?
    localStorage.setItem(process.env.VUE_APP_SIGNIN_STORED_USER_ID, STORED_ID);
    // const wrapper = mount(SigninPage, options);
    // const vm = wrapper.vm;

  });

});

【问题讨论】：

标签： vue.js jestjs ts-jest vue-test-utils

【解决方案1】：

自我回答。我是这样处理的。

describe("Header", () => {

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  let wrapper: VueWrapper<any>;

  const code = "A005930";
  const options = { propsData: { code } };

  beforeEach(async () => {
    wrapper = shallowMount(Header, options);
  });

  it("should have stored data set", async () => {
    const mockQueryParams = { code: "A005930", page: 0, size: 100 };
    await store.fetchPriceData(mockQueryParams);
    // ...
  });

  // ...
}

【讨论】：