vitest 模拟类星体失败答案

【问题标题】：vitest failed to mock quasarvitest 模拟类星体失败
【发布时间】：2023-02-05 20:00:09
【问题描述】：

我有 vue3 应用程序与 vite 和 vitest 并试图模拟我在自定义 Composable 中使用的 Quasar useQuasar 可组合项，例如：

// useLoginRequestBuilder.ts
import { makeUserAuthentication } from "@/main/factories"
import { useQuasar } from "quasar"

export function useLoginRequestBuilder() {
  const $q = useQuasar()

  async function login() {
    try {
      $q.loading.show()
      const auth = makeUserAuthentication()
      return await auth.signinRedirect()
    } catch (e) {
      console.log(e)
      $q.loading.hide()
      $q.notify({
        color: "red-4",
        textColor: "white",
        icon: "o_warning",
        message: "Login Failed!",
      })
    }
  }

  return {
    login,
  }
}

我正在尝试在测试中模拟 quasar，例如：

// useLoginRequestBuilder.spec.ts

import { useLoginRequestBuilder } from "@/main/builders"

vi.mock("quasar", () => ({ // <--- this is not really mocking quasar
  useQuasar: () => ({
    loading: {
      show: () => true,
      hide: () => true,
    },
  }),
}))

const spyAuth = vi.fn(() => Promise.resolve(true))

vi.mock("@/main/factories", () => ({
  makeUserAuthentication: () => ({
    signinRedirect: () => spyAuth(),
  }),
}))

describe("test useLoginRequestBuilder", () => {
  test("should call signinRedirect", async () => {
    const { login } = useLoginRequestBuilder()
    const sut = await login()
    expect(sut).toBe(true)
  })
})

vi.mock("quasar"... 模拟类星体失败，我遇到了以下错误。这意味着，它无法模拟并且无法获取 $q.loading.... 对象。

TypeError: Cannot read properties of undefined (reading 'loading')

我知道类星体有一个单独的测试库，here，但我认为这里并非如此。

【问题讨论】：

标签： unit-testing vuejs3 vite quasar-framework

【解决方案1】：

与 necro-post 接壤，但我有一个类似的问题，即模拟工厂没有创建在非 Vue 组件中使用的插件，最后不得不单独模拟每个调用。

虽然我会在这里为其他人添加它

vitest.mock("quasar", () => vi.fn()); // this doesn't mock out calls

// use individual mocks as below
import { Loading } from "quasar";
vi.spyOn(Loading, "show").mockImplementation(() => vi.fn());
vi.spyOn(Loading, "hide").mockImplementation(() => vi.fn());

【讨论】：