赛普拉斯中的“查找”是否等待 GraphQL 请求完成？答案

【问题标题】：Does "find" in Cypress wait for GraphQL requests to finish?赛普拉斯中的“查找”是否等待 GraphQL 请求完成？
【发布时间】：2019-04-23 12:44:20
【问题描述】：

我正在学习为 MERNQ 堆栈应用程序编写测试，并且我正在使用 cypress 作为我的端到端测试工具。我正在努力确保我的测试编写正确，以便它们作为长期解决方案发挥作用。目前，我只有一个对相关路线的请求，并且我有以下测试代码：

describe('Song API', () => {
    it('should show at least one song', () => {
        cy.server();
        // cy.route('GET', '/graphql').as('graphql');
        cy.route({
            method: 'GET', // Route all GET requests
            url: 'http://localhost:8080/graphql', // that have a URL that matches '/graphql'
            response: {
                data: {
                    loading: false,
                    songs: [
                        {
                            id: 1,
                            name: 'Boo Ya',
                        },
                    ],
                },
            },
        }).as('getSongs');
        cy.visit('http://localhost:8080').then(() => {
            cy.get('.collection').find('.collection-item');
        });
    });
});

我不明白这段代码如何让它在运行之前等待 graphql 响应完成，此外我没有得到我设置的数据，而是从数据库中获取实际数据。

这对我来说似乎很奇怪。

我的组件如下所示：

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

const SongList = ({ data }) => {
    // console.log(data);
    function renderSongs() {
        console.log(data);
        if (data.loading) {
            return <p>Loading...</p>;
        } else {
            return data.songs.map(song => {
                return (
                    <li key={song.key} className="collection-item">
                        {song.title}
                    </li>
                );
            });
        }
    }

    return <ul className="collection">{renderSongs()}</ul>;
};

const query = gql`
    query getSongs {
        songs {
            key: id
            title
        }
    }
`;

export default graphql(query)(SongList);

有什么想法或意见吗？

【问题讨论】：

我对 GraphQL 的经验完全为零，但赛普拉斯的月度通讯提到了这个存储库：github.com/tgriesser/cypress-graphql-mock。也许这会给你新的见解
感谢您提供的资源，我将通过它查看它是否适合我。

标签： graphql cypress

【解决方案1】：

所以我已经让存根数据正确响应。我的测试如下所示：

describe('Song API', () => {
    it('should show at least one song', () => {
        cy.server();
        cy.route('POST', 'http://localhost:8080/graphql', {
            data: {
                songs: [
                    {
                        key: 1,
                        title: 'Hey Ya',
                        __typename: 'SongType',
                    },
                    {
                        key: 2,
                        title: 'Gangsters Paradise',
                        __typename: 'SongType',
                    },
                    {
                        key: 3,
                        title: 'Other Name',
                        __typename: 'SongType',
                    },
                ],
            },
        }).as('getSongs');
        cy.visit('http://localhost:8080')
            .wait('@getSongs')
            .then(() => {
                cy.get('.collection').find('.collection-item');
            });
    });
});

我仍然认为通过所显示的查询名称获得正确响应的能力还有很大的改进空间。

【讨论】：