用 vitest 和 @vue/test-utils 模拟 laravel-echo

Question

我正在 Laravel/Vue/vite 堆栈中开发 Vue3 应用程序，并使用

laravel-echo

进行推送。有些组件正在与

Echo.private

或

Echo.notification

进行交互，到目前为止，我无法模拟 Echo 来测试它，或者在测试组件的其他方面时，如果没有其他办法可以防止出现许多错误。用法示例：

Echo.private(`user.${user?.id}`)
      .listenToAll((event, data) => {
        if (data?.data?.message) {
          adminMessagesStore.addMessage(data.data.message);
          scrollToBottom(bottomOfList.value);

          adminMessagesStore.getRecent();
        }
      });

在本例中，我在获取初始数据后在“onMounted”挂钩中使用该代码。

我的第一直觉是像这样嘲笑：

vi.mock('laravel-echo');

这样，我得到了错误

TypeError: default.private is not a function

。然后我尝试了这个：

const mockEcho = {
  private: vi.fn().mockReturnThis(),
  listenToAll: vi.fn(),
};
vi.mock('laravel-echo', () => mockEcho);

并得到错误

Error: [vitest] There was an error when mocking a module. If you are using "vi.mock" factory, make sure there are no top level variables inside, since this call is hoisted to top of the file. Read more: https://vitest.dev/api/vi.html#vi-mock

。我已经模拟了几个没有此类问题的第三方依赖项（axios、@vueuse/core、我自己的自定义可组合项或实用程序）。

有人有使用 vitest 或 jest 和 @vue/test-utils 成功模拟和测试

laravel-echo

的经验吗？ boostrap 设置是样板文件。即使进行最简单的安装测试也会出现这些错误。

Answer 1

好吧，这样想出来了：

vi.mock('laravel-echo', async () => {
  const actual = await vi.importActual('laravel-echo');

  return {
    ...actual,
    default: {
      private: vi.fn(() => {
        return {
          listenToAll: vi.fn(),
        };
      }),
    },
  };
});

模拟实际上并没有模拟

private

或

listenToAll

，因此必须部分模拟并使用预期的模拟函数覆盖默认属性。