使用 Cypress Typescript 类型答案

【问题标题】：Using Cypress Typescript types使用 Cypress Typescript 类型
【发布时间】：2020-02-18 10:45:40
【问题描述】：

我正在尝试使用 Cypress 设置 TypeScript。环境似乎设置得很好，但是从 Cypress 中提取类型定义似乎存在问题。

为了解构 cy.wait('@graphql').then({request}) 参数，TypeScript 抱怨您必须设置 request 参数的类型。从赛普拉斯导出的类型似乎并不多，但有 Cypress.WaitXHR 和 Cypress.ObjectLike 让我可以破解我的解决方案。

import Cypress from 'cypress';

type WaitXHR = Cypress.WaitXHR;
type ObjectLike = Cypress.ObjectLike;

describe('Admin Page', () => {
  it('Visits admin page', () => {
    cy.server()
      .route({
        method: 'POST',
        url: 'https://www.example.com/graphql',
      }).as('graphql');

    cy.visit('/');

    cy.wait('@graphql').then((xhr: WaitXHR) => {
      const { request }: { request: ObjectLike} = xhr;
      expect(request.body.operationName).to.equal('initalSetup');
    });
  });

这个解决方案似乎安抚了 TypeScript，但感觉不是很好。 有更好的方法吗？

【问题讨论】：

我在 node_modules 中搜索了这个并找到了 cypress.d.ts 的“请求”，还发现定义了这个特定的类型 - WaitXHR 和 ObjectLike。目前这是唯一的选择。可惜它没有使用其他类型，如节点请求。

标签： typescript integration-testing typescript-typings cypress

【解决方案1】：

我已经这样做了，虽然我不喜欢使用 'any' 它更整洁。

import Cypress from 'cypress';
type ObjectLike = Cypress.ObjectLike;

interface WaitXHRCustom {
  request: ObjectLike;
  response: ObjectLike;
}

cy.wait(`@${aliasRequest}`).should((xhr: any) => {
  const { request, response } = xhr as WaitXHRCustom;

【讨论】：