Jest.js 使用vitest和@vue/test-utils模拟laravel-echo

zdwk9cvp  于 2023-09-28  发布在  Jest
关注(0)|答案(1)|浏览(149)

我正在Laravel/Vue/vite堆栈中开发一个Vue 3应用程序,并使用laravel-echo进行推送。一些组件正在与Echo.privateEcho.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”钩子中使用该代码。
我的第一React是这样嘲笑他:

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的经验吗? Bootstrap 的设置是样板文件。即使在最简单的安装测试中也会出现这些错误。

jaql4c8m

jaql4c8m1#

好吧,我是这样想的:

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

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

mock实际上并没有mock privatelistenToAll,因此必须部分mock并使用预期的mock函数覆盖默认属性。

相关问题