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

xbp102n0 于 6个月前发布在 Jest

关注(0)|答案(1)|浏览(86)

我试图测试一个组件，它具有以下代码（缩短），使用服务工作者API“缓存”（https://developer.mozilla.org/en-US/docs/Web/API/Cache），而代码工作得很好，我有麻烦测试它。
React代码：

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单元测试中，我在渲染'cached' is undefined的组件时遇到了一个错误。我可能找错了树，但我决定尝试模仿它，如下所示：

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

型
但是我得到一个错误Cannot read properties of undefined (reading 'then')
什么是正确的方式来模拟/处理服务工作者缓存API？谁能给予我一个例子，我有困难找到任何东西。

jestjs

来源：https://stackoverflow.com/questions/77002929/unable-to-mock-cache-service-worker-api-for-react-jest-unit-test

1条答案

按热度按时间

xxslljrj1#

这是我的测试，失败的错误和你的一样，在设置间谍的时候抛出了一个undefined。

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

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

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

字符串
这将导致与您描述的相同的问题。我通过在self上设置一个mock来修复它，这就是我的案例中的service worker（Google的工作框）所使用的。

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

型

赞(0）回复(0）举报 6个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答