Why my object instance's variable were not be able to be accessed correctly in cypress/ it block?

In my class object, I have a variable named category, which would be initialed in constructor.

export class Page {

  constructor(category) {
    this.category = category;
  }

  categorySession = `[data-cy="${this.category}-form"]`


  enterValue(Value){
    cy.get(this.categorySession).find('Value').type(`${Value}`).should('have.value',`${Value}`)
  }
}

When I run the test, In cypress, it throws me a error [data-cy="undefined-form"], but never found it.

import {Page} from "./pages/valuePage"

const LiquidityPage = new Page('Liquidity')

console.log(LiquidityPage.category) <--- it show Liquidity

describe('E2E_case', () => {

  describe('Portfolio Value', () => {
    it('Input Portfolio Value', () => {
      cy.visit('http://localhost:30087/')

      LiquidityPage.enterValue(123)  // this gives me this error -  Timed out retrying after 4000ms: Expected to find element: [data-cy="undefined-form开发者_如何学编程"], but never found it.
     
        })

  })
  

Why is that [data-cy="undefined-form"] but not as my expected value [data-cy="Liquidity-form"]

You would also need to set sessionCategory in the constructor.

That way you will avoid the undefined value in the selector string.

export class Page {
  constructor(category) {
    this.category = category;
    this.categorySession = `[data-cy="${this.category}-form"]`
  }
  ...
}

But that seems quite obvious, you must have tried it already?