TS2339: Property 'username' does not exist on type 'JQuery<HTMLElement>'. When using Cypress fixtures

Question

I'm new to using TypeScript, I'm trying to convert my Cypress tests to TS but I'm having an issue whenever I'm reading from the fixtures file I get an error e.g.

TS2339: Property 'username' does not exist on type 'JQuery'.

An example of when I get the error is:

 cy.fixture("details").as("details");

    cy.get("@details").then((users) => {
      const user: string = users.username;

I can get it to run if I make users of type any e.g.

.then((users: any)

but I know that's not a good way to get around it.

I've seen a couple of other questions with a similar error but I'm not sure how to get those solutions working with Cypress, can anyone suggest anything that might help?

Answer 1

First, you have to define a type for your user structure, something like this:

class User {
  username: string
}

After that you can reference this type when you request the alias value (notice the get<User> expression):

    cy.get<User>("@details").then((users) => {
          const user = users.username;
    }

Answer 2

In cypress.d.ts there's interface Chainable that includes this definition for the get(alias) syntax

/**
 * Get one or more DOM elements by alias.
 * @see https://on.cypress.io/get#Alias
 * @example
 *    // Get the aliased ‘todos’ elements
 *    cy.get('ul#todos').as('todos')
 *    //...hack hack hack...
 *    //later retrieve the todos
 *    cy.get('@todos')
 */
get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>

For some reason it's not picking up in tests, but you can patch it in

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

// Add type definition in test file or /cypress/support/index.ts
declare namespace Cypress {
  interface Chainable {
    get<S = any>(alias: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<S>
  }
}

it('sees the get(alias) type def', () => {

  cy.fixture("example").as("details")   // using example fixture installed by Cypress

  cy.get("@details").then((user) => {
    const name: string = user.name  // no error
    const email: string = user.email  // no error
  })
})

---

If you just want to type as a generic object, use Cypress.ObjectLike, defined in cypress.d.ts as

interface ObjectLike {
  [key: string]: any
}

Use in test as

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

cy.get<Cypress.ObjectLike>("@details").then((user) => {
  const name: string = user.username;
})

---

Note
The Cypress dfn for alias has generic type get<S = any>, so your solution .then((users: any) => is pretty much equivalent.