JS: TypeError: Class extends value <ClassName> is not a constructor or null

Question

我使用 PageObject Pattern (NodeJS + Webdriverio) 编写 UI 测试，我有一个基础 class (BasePage)，一个页面 class(MyPage)，一个弹出组件 class(PopupComponentClass) 具有多用途行为，弹出 class 具有特定实现 (SpecificPopupComponentClass)。我需要从 PopupComponentClass.

扩展 SpecificPopupComponentClass

page.js:

export default class BasePage {


    get BASE_URL() {
        return "https://url.com";
    };

    ...some methods...
}

我的.page.js:

import BasePage from "../page";

class MyPage extends BasePage {

    constructor() {
        super();
    };

    get URL() { return `${this.BASE_URL}/some/path` };
    get title() { return $("h1") };

    orderRandomTariff() {
        ...some actions...
    };

}

export default new MyPage ();

popup.component.page.js:

import BasePage from "../pages/page";

class PopupComponent extends BasePage{

    constructor() {
        super();
    };

    get title() { return $("h1") };
    

}

export default new PopupComponent();

specific.popup.component.js:

import PopupComponent from "./popupFragment";

class SpecificPopupComponent extends PopupComponent {

    constructor() {
        super();
    };

    get popupStreetInput() { return $(".//div[@class='checkAddress']//*[./*[contains(text(),'Street')]]//input") };

    fillStreet(street) {
        ...some actions with this.popupStreetInput...
    };

}

export default new SpecificPopupComponent();

...并尝试在 test.js:

中使用它

import MyPage from "../../../../pages/my.page";
import SpecificPopupComponent from "../../../../fragments/specific.popup.component";

const myPage= MyPage ;
const popup = SpecificPopupComponent ;

describe("Test", () => {

    before(() => {
        myPage.open();
    });

    it("Check", () => {
        popup.fillStreet("Street");
    });

});

但我收到一个错误：“TypeError: Class extends vlaue #PopupComponent is not a constructor or null”。我怀疑这是由于循环依赖造成的，但我不明白我需要做些什么来解决这个问题。

Answer 1

这里的问题似乎是您如何导出基础 class。您正在实例化它，而不仅仅是导出您将从中继承的 class。应该是这样的：

export default class PopupComponent extends BasePage {

    constructor() {
        super();
    };

    get title() { return $("h1") };
    

}

然后在你要使用它的时候创建实例

var myPage = new MyPage()
var popup = new SpecificPopupComponent()

myPage.open()
popup.fillStreet('street')

你在那里所做的等同于这样做：

class SpecificPopupComponent extends new PopupComponent() {
   // ... what am I? 
}

I suspect this is due to circular dependencies

您可以通过以正确的顺序将所有代码复制到测试文件中而不使用导入来验证或拒绝您的怀疑。但我不认为这是一个循环依赖

我创建了 this Plunker 来删除导入的使用并证明这一点。

JS: TypeError: Class extends value <ClassName> is not a constructor or null

JS: TypeError: Class extends value <ClassName> is not a constructor or null

javascript

oop

dependencies

class

object