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

Question

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

id

不幸的是，我从graphql收到错误，抱怨Int是ObjectId而不是{{1}}。我错过了什么吗？

Answer 1

问题在于，赛普拉斯尚未实施存根fetch请求（这是Vue Apollo正在使用的）。我最终遵循these指示：

• 安装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";

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

2. 将任务命令添加到“ plugins / index.js”（请记住，以更早地更改计划文件的路径）

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

1. 使用已加载的架构编写测试

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

1. 请访问原始存储库以进行进一步说明，因为我发现它不那么混乱。您安装的软件包只是其中一个的工作分支： https://github.com/tgriesser/cypress-graphql-mock