How to use inheritance in Cypress

Question

I have check those post before make the question:

• https://dev.to/muratkeremozcan/functional-test-patterns-with-cypress-27ed
• http://blerdeyeview.com/cypress-page-objects/
• https://www.diogonunes.com/blog/cypress-pageobjects-inheritance-js/

I want to build a Generic class with the commons methods that will be used by the rest of PageObjects.

I have NodeContentType class

export default class NodeContentType {
  constructor() {
    // even though we will never instantiate this class
  }

  typeTitle(title, selector) {
    cy.get(selector).type(title);
  }
}

And when I try to extends it in another class:

import { NodeContentType } from "../NodeContentType/NodeContentType";

export default class BasicPage extends NodeContentType { }

And I get this error:

Super expression must either be null or a function

With this:

  3 | function _inherits(subClass, superClass) {
  4 |   if (typeof superClass !== "function" && superClass !== null) {
> 5 |     throw new TypeError("Super expression must either be null or a function");
    | ^
  6 |   }
  7 | 
  8 |   subClass.prototype = Object.create(superClass && superClass.prototype, {

Answer 1

If you look at Diogo Nunes blog the parent class has an empty constructor, but the child class still calls super() in it's constructor.

export class SignupUserPageTemplate {
  constructor() {
    // even though we will never instantiate this class
  }
  ...

export class SignupUserPagePT extends SignupUserPageTemplate {
  constructor() {
    super();
  }
  ...

I think you need to do the same, or remove the empty parent constructor.

Answer 2

It works in this way:

class NodeContentType {
  constructor() {
    // even though we will never instantiate this class
  }

  typeTitle(title, field) {
    cy.get(field).type(title);
  }
}
export { NodeContentType };