代码之家 › 专栏 › 技术社区 › Alexander Zeitler

使用TypeScript时添加自定义Cypress命令

cypress typescript

Alexander Zeitler · 技术社区 · 5 年前

cypress 命令,允许我使用 formData 作为 cy.request 不支持 窗体数据

我在用 request-promise-native 对于 POST 它自己。

首先,在我的 commands.ts Cypress.Chainable interface 这样地:

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      postFormData(
        url: string, 
        formData: FormData, 
        token: string): Chainable<FullResponse>
    }
  }
}

FullResponse 是的响应类型定义 请求承诺本机 .

postFormData 函数如下所示:

function postFormData(
  url,
  formData,
  token
): Cypress.Chainable<FullResponse> {  // this is line 52
  const response: FullResponse = await post(url, {
    auth: { bearer: token },
    formData
  })
  return cy.wrap(response) // this is line 58
}

最后,我要注册新命令:

Cypress.Commands.add('postFormData', postFormData)

在我的 test.ts ,我这样调用命令:

const response = cy.postFormData(
  url,
  formData,
  accessToken)
expect(response.statusCode).to.equal(202)

tsc 给我这些错误:

commands.ts:52:4 -  error TS1064: The return type of an async function or method must be the global Promise<T> type.

commands.ts:58:3 - error TS1058: The return type of an async function must either be a valid promise or must not contain a callable 'then' member.

cy.wrap 返回一个 Chainable 但不是一个 Promise ,那我怎么解决这个问题呢?

0 回复 | 直到 5 年前

Alexander Zeitler 5 年前

这是一个可能的解决办法

import { post, FullResponse } from 'request-promise-native'

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      postFormData(
        url: string, 
        formData: FormData, 
        token: string): Chainable<FullResponse>
    }
  }
}

function postFormData(url, formData, token): Cypress.Chainable<any> {
  return cy.wrap(
    post(url, {
      auth: { bearer: token },
      formData
    })
  )

Cypress.Commands.add('postFormData', postFormData)

正确用法是:

cy.postFormData(
  url,
  formData,
  accessToken)
  .then((response) => {
    expect(response.statusCode).to.equal(202)
  })

更新

作为 request is in maintainance mode 还有一个 issue with browsers 和 formData ,下面是一个使用 axios :

import axios, { AxiosResponse } from 'axios'

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      postFormData(
        url: string,
        formData: FormData,
        token: string
      ): Chainable<AxiosResponse>
    }
  }
}

function postFormData(url, formData, token): Cypress.Chainable<any> {
  return cy.wrap(
    axios(url, {
      method: 'post',
      url,
      data: formData,
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'multipart/form-data'
      }
    })
  )
}

Cypress.Commands.add('postFormData', postFormData)

cy.postFormData(
  url,
  formData,
  accessToken)
  .then((response) => {
    expect(response.status).to.equal(202)
  })