Enzyme 无法找到在 React Apollo Query 组件中呈现的子项答案

【问题标题】：Enzyme unable to find children rendered inside React Apollo Query componentsEnzyme 无法找到在 React Apollo Query 组件中呈现的子项
【发布时间】：2018-11-12 04:40:00
【问题描述】：

你能告诉我如何用 Enzyme 测试 apollo 查询组件吗？该查询使用isomorphic-fetch 从数据库中获取数据。这是我的示例测试代码：

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
    })
});

为什么 Enzyme 在 Query 组件中找不到 CustomComponent？但是，当孩子不是函数时，以下示例将起作用：

describe('Component', async () => {
    it('exists',  async () => {
        let wrapper = await mount(
            (
                <TestProvider>
                    <div><CustomButton/></div>
                </TestProvider>
            )
        );
        // return true
        expect(wrapper.find(CustomButton).exists()).to.be.true
    })
});

【问题讨论】：

调试它的一种方法是记录包装对象或使用调试器来检查它。然后您可以确认该元素实际上没有被渲染。
@Herku，问题是我找不到等待阿波罗在expect函数触发之前完成从服务器获取数据并渲染的方法。

标签： reactjs mocha.js graphql enzyme react-apollo

【解决方案1】：

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

我不确定 apollo 的一般测试策略。这也许是 UI 测试会更好的地方。当你想在单元测试中测试你的组件时（例如，我们很少在工作中这样做）只测试组件本身，而不是里面的查询。使用 React Apollo 的新渲染道具 API，这变得更加困难，但在我看来，这是因为在这个意义上对组件进行单元测试非常不受欢迎。或者，您可以查看 react-testing-library，它有一个名为 waitForElement 的函数，其行为比在 cypress 等 UI 测试中的断言要多一些。

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();
    }
})

【讨论】：

【解决方案2】：

这是我在酶中异步渲染的临时解决方案。我必须在每个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)
    })
});

您有其他建议吗？我想避免使用setTimeout。

【讨论】：