graphql - 如何使用 cypress 存根对 graphql 的调用？

Question

我正在编写一个使用 vue-apollo 与 graphql 交互的 Vue 应用程序。我想知道是否可以存根 graphql 请求。我认为这应该工作：

  it('should access a story', function() {
    cy.server();
    cy.route('http://localhost:3002/graphql', {
      data: {
        Story: { id: 2, title: 'story title', content: 'story content' }
      }
    });

    cy.visit('/stories/2');
  });

不幸的是，我从 graphql 中得到一个错误，抱怨它id是 anInt而不是ObjectId. 我错过了什么吗？

Answer 1

问题是fetch赛普拉斯还没有实现存根请求（这是 Vue Apollo 正在使用的）。我最终遵循了这些说明：

• 安装github/fetch
• 将此添加到cypress/support/index.js：

.

Cypress.on('window:before:load', win => {
  win.fetch = null;
  win.Blob = null;
});

现在它起作用了！

Answer 2

我在这里使用这个包：

1. npm i @iam4x/cypress-graphql-mock

2. 将此行添加到“support/commands.js”

import "@iam4x/cypress-graphql-mock";

3. 转到您的 graphiql 游乐场并下载您的架构

4. 将任务命令添加到“plugins/index.js”（记住更改您之前下载的架构文件的路径）

module.exports = (on, config) => {
  on("task", {
    getSchema() {
      return fs.readFileSync(
        path.resolve(__dirname, "../../../schema.graphql"),
        "utf8"
      );
    }
  });
};

5. 使用加载的模式编写测试

beforeEach(() => {
  cy.server();
  cy.task("getSchema").then(schema => {
    cy.mockGraphql({
      schema
    });
  });
});`

describe("Login Form", () => {
  it("should redirect after login", () => {
    cy.mockGraphqlOps({
      operations: {
        Login: {
          login: {
            jwt: "some-token",
            user: {
              id: "5d5a8e1e635a8b6694dd7cb0"
            }
          }
        }
      }
    });
    cy.visit("/login");
    cy.getTestEl("email-input").type("Max Mustermann");
    cy.getTestEl("password-input").type("passwort");
    cy.getTestEl("submit").click();
    cy.getTestEl("toolbar-title").should("exist");
  });
})

6. 访问原始存储库以获得进一步的解释，因为我发现它不那么令人困惑。您安装的包只是这个包的一个工作分支： https ://github.com/tgriesser/cypress-graphql-mock