typescript - Problem med att ställa in cypress anpassat kommando npm-modul

Ursäkta de stora bilderna, jag vet inte hur man gör dem mindre.

Jag antar att jag går rakt på mitt problem. Jag har följande mappstruktur:

Jag försöker skapa ett repo med egna Cypress-kommandon. Jag har stött på två problem.

För det första, om jag byter namn på commands.ts till index.ts får jag en massa konstiga typningsproblem (även om Chainable returnerar void).

detta är index.d.ts (Chainable här men samma problem med att returnera void):

Om jag byter namn på index.ts till commands.ts igen och försöker bygga det får jag följande problem:

Så ganska många problem här. Jag skulle uppskatta om någon kan vägleda mig genom den här processen.

Svar #1

Följande fungerar för mig, vilket jag tror är det "standard" sättet att lägga till anpassade kommandon i TypeScript.

cypress/support/commands.ts

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject = any> {
    /**
     * Custom command to select DOM element by data-test-id attribute.
     * @example cy.getDataTestId('greeting')
     */
     getDataTestId(value: string): Chainable<JQuery<Element>>
  }
}

Cypress.Commands.add('getDataTestId', (value: string) => {
  return cy.get(`[data-test-id="${value}"]`)
})

Anteckningar om ändringar

  • allt finns i command.ts inklusive typdefinitionen (se Types för egna kommandon)

  • det finns en cypress/support/index.ts som importerar cypress/support/commands.ts

  • returtyp är Chainable<JQuery<Element>>

  • det anpassade kommandot är inte tilldelat en variabel

Typescript-referens Inkluderar deklarationer i ditt npm-paket

Om ditt paket har en huvud-.js-fil måste du också ange huvuddeklarationsfilen i din package.json-fil. Ställ in egenskapen types så att den pekar på din sammansatta deklarationsfil. Till exempel:

  {
    "name": "awesome",
    "author": "Vandelay Industries",
    "version": "1.0.0",
    "main": "./lib/main.js",           // NOTE .js extension
    "types": "./lib/main.d.ts"
  }