Reactjs 无法找到在React Apollo查询组件中呈现的子级

你能告诉我如何用酶测试apollo查询组件吗。查询使用

同构提取

从数据库中提取数据。下面是我的示例测试代码：

describe('Query', async () => {

    it('exists',  async () => {

        let wrapper = await mount(
            (
                <TestProvider>
                    <Query query={gql`...`}>
                        {
                           ({data:{something}})=>
                                 <CustomComponent something={something} />
                        }
                    </Query>
                </TestProvider>
            )
        );
        // return false
        expect(wrapper.find(CustomComponent).exists()).to.be.true
    })
});

---

这是我在Ezyme中异步渲染的临时解决方案。我必须在每个

it

函数中使用

wrapper.updated（）

：

describe('Query', () => {

    let wrapper;

    before( ()=>{
        wrapper = mount(
            (
                <TestProvider>
                    <Query query={gql`...`}>
                        {
                           ({data:{something}})=>
                                 <CustomComponent something={something} />
                        }
                    </Query>
                </TestProvider>
            )
        );
    })

    it('exists', done => {
        setTimeout( ()=>{
            wrapper.update();
            console.log(wrapper.debug());
            expect(wrapper.find(CustomImage).length).to.be.above(0);
            done();
        },1000)
    })
});

description（'Query'，（）=>{
让包装纸；
之前（（）=>{
包装=装载(
(
{
（{data:{something}}）=>
}
)
);
})
它（'exists'，done=>{
设置超时（（）=>{
wrapper.update（）；
log（wrapper.debug（））；
expect（wrapper.find（CustomImage.length）.to.be.over（0）；
完成（）；
},1000)
})
});

---

你有其他的建议吗？我希望避免使用

setTimeout

也许使用经典回调会起作用，请参见下文

我不确定阿波罗在这里的总体测试策略。这可能是UI测试更好的地方。当您想在单元测试中测试组件时（例如，我们很少在工作中进行单元测试），只测试组件本身，而不测试组件内部的查询。使用React Apollo的新render prop API，这变得更加困难，但在我看来，这是因为在这种意义上，单元测试组件非常不受欢迎。或者，您也可以研究一个在UI测试中（如cypress）调用的函数，其行为比断言稍多一些

it('exists',  done => {

    let wrapper = await mount(
        (
            <TestProvider>
                <Query query={gql`...`}>
                    {
                       ({data:{something}})=> {
                           process.nextTick(check);
                           return <CustomComponent something={something} />;
                    }
                </Query>
            </TestProvider>
        )
    );
    function check() {
      expect(wrapper.find(CustomComponent).exists()).to.be.true
      done();
    }
})

it（'exists'，done=>{
让包装器=等待装载(
(
{
（{data:{something}}）=>{
过程。下一步检查（检查）；
回来
}
)
);
函数检查（）{
expect（wrapper.find（CustomComponent.exists（））.to.be.true
完成（）；
}
})

对此进行调试的一种方法是记录包装器对象或使用调试器对其进行检查。然后您可以确认元素实际上没有呈现。@Herku，问题是我找不到方法等待apollo在触发

expect

函数之前完成从服务器获取数据和呈现。

it('exists',  done => {

    let wrapper = await mount(
        (
            <TestProvider>
                <Query query={gql`...`}>
                    {
                       ({data:{something}})=> {
                           process.nextTick(check);
                           return <CustomComponent something={something} />;
                    }
                </Query>
            </TestProvider>
        )
    );
    function check() {
      expect(wrapper.find(CustomComponent).exists()).to.be.true
      done();
    }
})