是不是；查找“；在Cypress中等待GraphQL请求完成？

我正在学习为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);

从“React”导入React；
从“graphql标签”导入gql；
从'react apollo'导入{graphql}；
const SongList=（{data}）=>{
//控制台日志（数据）；
函数renderSongs（）{
控制台日志（数据）；
if（数据加载）{
返回加载…
；
}否则{
返回data.songs.map（song=>{
返回(

{song.title}

);
});
}
}
return
{renderSongs（）}
；
};
const query=gql`
查询getSongs{
歌曲{
关键字：id
标题
}
}
`;
导出默认图形QL（查询）（歌曲列表）；

---

有什么想法或意见吗？

所以我得到了存根数据以正确响应。我的测试如下所示：

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

---

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

我对GraphQL没有任何经验，但Cypress的每月通讯提到了这个存储库：。也许这会给你带来新的见解谢谢你提供的资源我会仔细研究一下，看看是否适合我。