如何使用 Cypress 测试 GraphQL API？

在前端开发中，接口测试是一个必不可缺的环节。GraphQL API 的出现让前端对接口的需求更加细致化，因此对 GraphQL API 的测试也越来越重要。Cypress 是一个功能强大的前端端到端测试框架，可以很好地支持 GraphQL API 的测试。本文将会介绍如何使用 Cypress 进行 GraphQL API 的测试。

安装 Cypress

首先，你需要安装 Cypress。在终端中，执行以下命令即可：

npm install cypress --save-dev

配置 Cypress

安装完成后，在项目根目录下创建 cypress.json 文件，用于配置 Cypress。示例代码如下：

{
  "baseUrl": "http://localhost:3000",
  "fixturesFolder": false,
  "integrationFolder": "cypress/integration",
  "pluginsFile": false,
  "port": 3000,
  "reporter": "spec"
}

其中：

• baseUrl：定义应用的基础 URL，用于在测试时发起请求。
• fixturesFolder：定义存放模拟数据的文件夹路径。
• integrationFolder：定义存放测试用例的文件夹路径。
• pluginsFile：定义 Cypress 插件的文件路径。
• port：定义应用的端口号。
• reporter：定义测试报告的输出格式。

编写测试用例

创建测试用例文件，在 cypress/integration 文件夹下创建 graphql.spec.js 文件。以下代码演示了如何使用 Cypress 测试 GraphQL API：

// www.javascriptcn.com code example
describe('GraphQL API', () => {
  it('should return all posts', () => {
    cy.request({
      method: 'POST',
      url: '/graphql',
      body: {
        query: `
          query {
            posts {
              id
              title
              content
            }
          }
        `
      }
    }).then(response => {
      expect(response.status).to.eq(200)
      expect(response.body.data.posts).to.have.lengthOf(2)
    })
  })

  it('should return a single post', () => {
    cy.request({
      method: 'POST',
      url: '/graphql',
      body: {
        query: `
          query {
            post(id: 1) {
              id
              title
              content
            }
          }
        `
      }
    }).then(response => {
      expect(response.status).to.eq(200)
      expect(response.body.data.post).to.have.property('id', 1)
      expect(response.body.data.post).to.have.property('title', 'Hello, world')
      expect(response.body.data.post).to.have.property('content', 'This is my first post.')
    })
  })

  it('should create a new post', () => {
    cy.request({
      method: 'POST',
      url: '/graphql',
      body: {
        query: `
          mutation {
            createPost(
              input: {
                title: "My new post"
                content: "This is my new post."
              }
            ) {
              id
              title
              content
            }
          }
        `
      }
    }).then(response => {
      expect(response.status).to.eq(200)
      expect(response.body.data.createPost).to.have.property('title', 'My new post')
      expect(response.body.data.createPost).to.have.property('content', 'This is my new post.')
    })
  })

  it('should update a post', () => {
    cy.request({
      method: 'POST',
      url: '/graphql',
      body: {
        query: `
          mutation {
            updatePost(
              id: 1
              input: {
                title: "Updated post"
                content: "This post has been updated."
              }
            ) {
              id
              title
              content
            }
          }
        `
      }
    }).then(response => {
      expect(response.status).to.eq(200)
      expect(response.body.data.updatePost).to.have.property('id', 1)
      expect(response.body.data.updatePost).to.have.property('title', 'Updated post')
      expect(response.body.data.updatePost).to.have.property('content', 'This post has been updated.')
    })
  })

  it('should delete a post', () => {
    cy.request({
      method: 'POST',
      url: '/graphql',
      body: {
        query: `
          mutation {
            deletePost(id: 1) {
              id
            }
          }
        `
      }
    }).then(response => {
      expect(response.status).to.eq(200)
      expect(response.body.data.deletePost).to.have.property('id', '1')
    })
  })
})

测试用例包含以下 5 个部分：

1. 返回所有文章：发送一个 GraphQL Query 请求，获取所有文章并测试获取到的文章数量是否正确。
2. 返回单篇文章：发送一个 GraphQL Query 请求，获取一篇文章并测试获取到的文章数据是否正确。
3. 创建文章：发送一个 GraphQL Mutation 请求，创建一篇文章并测试是否创建成功。
4. 更新文章：发送一个 GraphQL Mutation 请求，更新一篇文章并测试更新是否成功。
5. 删除文章：发送一个 GraphQL Mutation 请求，删除一篇文章并测试数据是否删除成功。

运行测试用例

在终端中执行以下命令即可运行测试用例：

npx cypress run

如果你想在浏览器中手动运行测试用例，则执行以下命令：

npx cypress open

结语

本文介绍了如何使用 Cypress 测试 GraphQL API，包括 Cypress 的安装、配置、编写测试用例以及运行测试等方面。希望能对前端开发者们有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6853ca941bf7134c4e0fc