Reactjs 反应Apollo MockProvider始终加载,从不提供数据

Reactjs 反应Apollo MockProvider始终加载,从不提供数据,reactjs,mocking,graphql,enzyme,react-apollo,Reactjs,Mocking,Graphql,Enzyme,React Apollo,我试图测试一个使用graphql的组件,但是当使用Apollo的MockProvider时,我从来没有得到数据,每次它都说loading=true 一个完整的、极简主义的例子是 我尝试过的事情: 在线查看(找到了,但由于没有答案,我想我应该制作一个包含更多信息的新版本) 在测试时尝试在不使用graphql的情况下导出组件(export function Component),但在测试嵌套组件时,这不起作用 尝试尽可能地简化(其结果在示例中) 是的,我也遇到了这个问题。有趣的是,如果我将控制台日志

我试图测试一个使用graphql的组件,但是当使用Apollo的MockProvider时,我从来没有得到数据,每次它都说loading=true

一个完整的、极简主义的例子是

我尝试过的事情:

  • 在线查看(找到了,但由于没有答案,我想我应该制作一个包含更多信息的新版本)
  • 在测试时尝试在不使用graphql的情况下导出组件(
    export function Component
    ),但在测试嵌套组件时,这不起作用
  • 尝试尽可能地简化(其结果在示例中)

  • 是的,我也遇到了这个问题。有趣的是,如果我将控制台日志添加到组件本身,我可以看到数据最终很好地到达了那里。但是由于某种原因,
    包装器
    仍然只包含我们的“加载…”UI

    事实证明,您需要调用
    wrapper.update()
    ,以使包装重新呈现其内容

    这对我来说很有效,但似乎不太理想,所以如果其他人有解决办法,请告诉我!现在我们的测试看起来像:

    it('如果有指南数据,则应呈现HeroDiv',async()=>{
    常量包装器=装入(
    );
    等待等待(0);
    wrapper.update();
    expect(wrapper.find('HeroDiv').exists()).toBeTruthy();
    
    })
    我不喜欢
    等待等待(0)
    方法。看看阿波罗文件:

    
    对于计算量大或渲染逻辑中添加延迟的更复杂UI,等待(0)的时间不够长。
    

    这意味着您的测试可能是不可靠的。为了解决这个问题,我使用了
    wait-for-expect
    包(也包含在文档中:):

    it('如果有指南数据,则应呈现HeroDiv',async()=>{
    常量包装器=装入(
    );
    等待waitForExpect(()=>{
    wrapper.update();
    expect(wrapper.find('HeroDiv').exists()).toBeTruthy();
    });
    })
    
    waitForExpect
    基本上会进行轮询,直到条件完成并在5秒后超时。这保证了您的测试将完成,只要您的查询在5秒之前完成,如果您使用的是MockedProvider,这是绝对应该完成的


    文档指出了一个警告:
    在默认情况下,在任何地方使用这样的包的风险在于,每个测试都可能需要长达5秒的时间来执行(如果默认超时时间增加,则需要更长时间)。
    但根据我的经验,MockedProvider永远不会出现这种情况。另外,
    wait wait(0)
    无论如何都不会一致地处理这种情况。

    另外,请确保在组件文件中导入的查询与在测试文件中使用的查询完全相同。例如,我遇到一个问题,我的mocks道具无法将任何数据传递给MockedProvider,因为我正在导入:

    import { CURRENT_USER_QUERY } from '../lib/queries';
    
    在PleaseSigin.js中,我正在导入:

    import { CURRENT_USER_QUERY } from './User';
    

    在plesseignin.test.js中。显然,即使两个查询是相同的,但就Jest而言,它们并不相同

    你在用什么?酶?@arcom是的。是的,这很奇怪,但它起作用了。对于阅读本文的其他人,请用0 times替换setTimeout中的
    wait
    来包装
    expect
    。令人惊讶的是,我已经坚持了好几天了……非常感谢
    import { CURRENT_USER_QUERY } from './User';