How can I DRY up the code by mounting Vue component in the beforeEach hook using typescript?

user_16616415 0
Viewed 85

Here is my code. I want to DRY up this case.

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;

  });

});

How can I use the beforeEach hook like next using typescript?

I want to use the beforeEach hook. But I can not running test because of tsc. I think it will be possible when variable types is correct.

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;

  });

});
ts-jest vue-test-utils vue.js jestjs
1 Answers

Self answer. I handled like this.

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);
    // ...
  });

  // ...
}
user_166164150
Related