无法模拟用于 React/Jest 单元测试的缓存服务工作 API

Question

我正在尝试测试具有以下代码（缩短）的组件，该组件使用 Service Worker API“缓存”（https://developer.mozilla.org/en-US/docs/Web/API/Cache ），虽然代码运行良好，但我在测试它时遇到了麻烦。

反应代码：

useEffect(() => { 
   caches.open(CURRENT_CACHES.backendPlayerInfo).then(async (cache) => {
         const url = 'mysite.com/api/myapi';
         const response = await cache.match(url);
         if(response) {
              //use cached response
         } else {
             //call api
         }
...

在我的 Jest 单元测试中，在渲染“缓存”未定义的组件时出现错误。我可能找错了树，但我决定尝试像这样嘲笑它：

global.caches = {
      open: jest.fn().mockResolvedValue({
        match: jest.fn(),
        put: jest.fn(),
      }),
};

但后来我得到了一个错误

Cannot read properties of undefined (reading 'then')

模拟/处理 Service Worker 缓存 API 的正确方法是什么？谁能给我一个例子，我找不到任何东西。

Answer 1

我自己也遇到过这个。这是我的测试，失败的错误与您的错误大致相同，在在那里设置间谍时抛出未定义的错误。

    // arrange
    const spy = jest.spyOn(self.caches, 'open');

    // act
    const cb = await fetchDidSucceed({
      request: request,
      response: response,
    });

    // assert
    expect(cb).toBe(response);

这会导致您所描述的相同问题。我通过在

self

上设置一个模拟来修复它，这就是我的案例中的 Service Worker（Google 的工作箱）所使用的。

    beforeEach(() => {
     self.caches = {
      open: jest.fn().mockResolvedValue({
        keys: jest.fn(),
        add: jest.fn()
      });
     }
    });