CODEWITHSUNDEEP
javascripttestcafe
user19761491
user19761491

Reputation:

TypeError: Class extends value #<BasePage> is not a constructor or null

in BasePage.js

import { Selector, t } from "testcafe"

class BasePage {
    constructor(){
        this.inputFieldID = Selector('#name')
    }

    async inputValueDynamicField(value){
        await t
        .typeText(this.inputFieldID , value)
    }
}

export default new BasePage

in LoginPage.js

import BasePage from "./BasePage"

class LoginPage extends BasePage{
    constructor(){
        super()
    }

    
}

export default new LoginPage();

in test.js

import LoginPage from "../page/LoginPage";

fixture('OOP')
.page("https://opensource-demo.orangehrmlive.com/")

test('Helo' , async t => {
    LoginPage.inputValueInDynamicField
})

after I run it, it have error TypeError: Class extends value # is not a constructor or null, so someone know this, please help me on this, thanks

Upvotes: 1

Views: 316

Answers (1)

trincot
trincot

Reputation: 350272

Your are exporting an instance of BasePage:

export default new BasePage

Yet you expect it to be a class that can be extended:

class LoginPage extends BasePage

So don't create an instance, but just export the class to be extended:

export default BasePage

Only apply the change to that line. The other export should stay as it is. Or, better, remove new from this line too:

export default LoginPage

And then create an instance here:

new loginPage().inputValueInDynamicField(t)

Summary

BasePage.js

export default BasePage

LoginPage.js

export default LoginPage;

test.js

test('Helo' , async t => {
    new LoginPage().inputValueInDynamicField(t)
})

Upvotes: 1

Related Questions