从赛普拉斯存根返回静态数据

Question

我是cypress的新手，我希望在他们向graphql发出请求时将数据返回给客户端。我不确定存根是否是正确的方向。我研究了https://medium.com/wehkamp-techblog/mocking-specific-graphql-requests-in-cypress-io-22c67924e296，但是我不完全了解它是如何工作的，因此我尝试从基础上逐步完善。我知道这可以处理任何graphql查询并返回相同的内容，但这对于我当前的学习要求来说是可以的。

it('something else', () => {
        cy.visit('http://localhost:8080', {
            onBeforeLoad: win => {
                cy.stub(win, 'fetch')
                    .withArgs('/graphql')
                    .resolves({
                        data: {
                            songs: [
                                {
                                    id: 1,
                                    title: 'Hey Ya',
                                },
                            ],
                        },
                    });
            },
        }).contains('Loading...');
    });

我不知道从哪里开始。

另外，我正在尝试类似下面的代码的请求发出请求，然后返回它，以便可以使用和测试实际数据。即使返回看起来正确，React UI似乎也没有更新。

it('something else', () => {
        const query = `query getSongs{
            songs {
                key: id
                title
            }
        }`;
        cy.request({
            url: 'http://localhost:8080/graphql',
            body: { query },
            failOnStatusCode: false,
        }).then(res => {
            cy.log(res);
            expect(res.body.data.songs[0].title).to.equal('Hey Ya');
            // Do something with the data here like visit the page and stub with the requested data
            cy.visit('http://localhost:8080', {
                onBeforeLoad: win => {
                    cy.stub(win, 'fetch')
                        .withArgs('/graphql')
                        .returns(res.body.data); // This returns correctly but doesn't display in ui
                },
            }).contains('Hey Ya');
        });
    });