Custom array class methods disappear

[nicholaschiang]

Current behavior

Custom array class methods disappear:

class MyArray extends Array<number> {
  public toString(): string {
    return 'Custom toString method called!';
  }

  public toDB(): string[] {
    return Array.from(this.map((t) => t.toString()));
  }
  
  public static fromDB(record: string[]): MyArray {
    return new MyArray(...record.map((t) => Number(t)));
  }
}

 // Logs an empty array `[]`
console.log('MyArray:', new MyArray());
// Logs an empty string (calls Array#toString instead of MyArray#toString)
console.log(`MyArray: ${new MyArray().toString()}`); 
// Logs `undefined` (even though I defined a MyArray#toDB method)
console.log('MyArray toDB:', new MyArray().toDB);
// Logs `[Function (anonymous)]` (so static methods are preserved)
console.log('MyArray fromDB:', MyArray.fromDB);

Desired behavior

Cypress should compile that custom MyArray class and it's methods properly.

// Should log `Custom toString method called!` instead of an empty string
console.log(`MyArray: ${new MyArray().toString()}`); 
// Should log `[Function (anonymous)]` instead of `undefined`
console.log('MyArray toDB:', new MyArray().toDB);

Test code to reproduce

See description above.

Cypress Version

Cypress package version: 8.1.0
Cypress binary version: 8.1.0
Electron version: 12.0.0-beta.14
Bundled Node version: 14.15.1

[sainthkh]

It's a bit hard to guess why this happened, but it might be because Cypress tests are trying to access application code.

For example, if you write the whole code in a single TS test file like below:

// test.ts

class MyArray extends Array<number> {
  public toString (): string {
    return 'Custom toString method called!'
  }

  public toDB (): string[] {
    return Array.from(this.map((t) => t.toString()))
  }

  public static fromDB (record: string[]): MyArray {
    return new MyArray(...record.map((t) => Number(t)))
  }
}

it('cy works', () => {
  // Should log `Custom toString method called!` instead of an empty string
  console.log(`MyArray: ${new MyArray().toString()}`)
  // Should log `[Function (anonymous)]` instead of `undefined`
  console.log('MyArray toDB:', new MyArray().toDB)
})

The result is like below:

The app code and test code are run in the separate frames, so it causes unexpected behavior.

The solutions might be print out some messages on the app window and test the message with cy commands.

[nicholaschiang]

@sainthkh have you tested that out when it's running in a Cypress task defined in the plugins file? Because I can recreate my repro when it's in a task, but I haven't yet tried to do what you just did (where the custom class is defined and used all in an actual test file that is bundled for the browser).

[sainthkh]

cy.task runs code in Node environment. It's natural that MyArray is not sent to the browser environment.

[nicholaschiang]

Yeah, I know. But the logs in the terminal Node.js environment also show disappearing array methods.

[sainthkh]

When I changed the compile target in tsconfig.json from ES5 to ES6. It works.

[sainthkh]

@nicholaschiang Did it solve the problem? If so, we can close the issue.

[sainthkh]

Closing because of the inactivity.