如何在 Cypress 中正确输入插件

Question

我发现 Cypress 中的打字稿支持有点令人困惑。我能够相当轻松地为我的自定义命令实现正确的输入。但是，我正在努力让它与插件一起工作。

例如，如果我有这个简单的 plugins/index.ts 文件。

import { generateEmail } from "./my-temp-mail-file"

const pluginConfig = async (on, config) => {
  on("task", {
    generateEmail: async () => {
      const email = await generateEmail()
      return email
    }
  })
}

export default pluginConfig

on, config总是未定义的类型（即Parameter 'on' implicitly has an 'any' type）。即使我包含 type declaration suggested by Cypress 也无济于事。

当我尝试使用自定义插件时，then 方法中可用的 return 参数始终是 unknown.

例如 email 总是未知的。

cy.task("generateEmail").then(email => {
  ///...do something
})

目前我正在导入我的类型，这很有效，但有点烦人。

cy.task("generateEmail").then((email: string) => {
  ///...do something
})

有没有办法像使用命令一样让它们自动存在？

Answer 1

您可以通过悬停 Cypress.PluginConfig 查看 on, config 的类型，但不可否认的是，注释应该开始了。

如果generateEmail()有return类型，会在任务中推断

/**
 * @type {Cypress.PluginConfig}
 */
export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {

  on("task", {
    generateEmail: async () => {
      const email = await generateEmail()   // type shows "const email: string"
      return email
    }
  })

}

function generateEmail(): Promise<string> { 
  return Promise.resolve('z')  
}

要在测试中键入任务 return 值，请将其添加到插件

declare global {
  namespace Cypress {
    interface Chainable {
      task(event: 'generateEmail'): Chainable<string>;
    }
  }
}

cy.task('generateEmail').then(email => {   // type shows "(parameter) email: string"  
  ...
})

如何在 Cypress 中正确输入插件

How to properly type plugins in Cypress

typescript

testing

cypress