Question

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

有什么想法或评论吗？

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

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

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

1 个答案: