【问题标题】:undefined is not a constructor in Mocha / Chai / Sinon on PhantomJS with Array.prototype.findundefined 不是带有 Array.prototype.find 的 PhantomJS 上的 Mocha / Chai / Sinon 中的构造函数
【发布时间】:2017-02-09 19:18:08
【问题描述】:

我现在对此非常头疼。我在尝试测试的方法中有一行代码,我无法通过我所做的任何事情。有用!在“现实世界”中没有任何问题。

我发现每次我深入研究 JS 单元测试时都会遇到这样的问题,这让我怀疑它是否真的值得。

这是我正在尝试测试的方法...

    _mapStopsAroundHub(managerContext, soCode, homePostcode, homeStops, changeLinkedStopCallback) {
    homeStops = homeStops || [];
    MappingDataGateway.getNearbyStops(soCode, homePostcode, Cfg.DefaultNearbyStopDistance, (stops, status, xhr) => {
        if(status == MappingDataGateway.Status.OK) {
            stops.forEach((element) => {
                let isHomeStop = homeStops.length > 0 && (homeStops.find(hs => hs.id === element.id) !== undefined);
                let markerColor = isHomeStop ? "green" : "orange";
                let marker = managerContext.addBusStopMarker(element, markerColor);
                if (changeLinkedStopCallback) {
                    managerContext._api.event.addListener(marker, 'click', () => {
                        let newIcon = marker.icon.includes("orange") ? `/images/fa-bus-green.png` : `/images/fa-bus-orange.png`;
                        marker.setIcon(newIcon);
                        changeLinkedStopCallback(marker.data);
                    })
                }
            });
        }
        else if (errorCallback) { errorCallback(xhr); }
    });
}

我添加了“isHomeStop”变量和完全不必要的 homeStops.length 检查以让一些测试用例通过,但我无法测试 homeStops 数组包含数据的情况,因为 Mocha 一直如此有用的错误消息“未定义不是构造函数”类型消息。完整的错误如下...

PhantomJS 2.1.1 (Windows 8 0.0.0) MapsManager 可以与加载的地图交互,以直接映射枢纽点周围的停靠点,并使用链接停靠点映射该区域中所有可选停靠点,以不同颜色显示选定链接停靠点失败 undefined 不是构造函数(评估 'homeStops.find(function (hs) { 返回 hs.id === element.id; })')

失败的测试看起来像这样......

  it("directly with a linked stop mapping all selectable stops in the area showing selected linked stops in a different colour", () => {
            let allStops = [{ id: 1 }, { id: 2 }, { id: 3 }];
            let homeStops = [{ id: 2 }];
            let mappingDataStub = Sinon.stub(MappingDataGateway, 'getNearbyStops');
            mappingDataStub.yields(allStops, "OK");
            let addMarkerStub = Sinon.stub(objUt, 'addBusStopMarker');

            objUt._mapStopsAroundHub(objUt, testSoCode, testPostCode, homeStops);
            mappingDataStub.restore();
            addMarkerStub.restore();

            Sinon.assert.calledThrice(addMarkerStub);
            Sinon.assert.calledWith(addMarkerStub, allStops[0], "orange");
            Sinon.assert.calledWith(addMarkerStub, allStops[1], "green");
            Sinon.assert.calledWith(addMarkerStub, allStops[2], "orange");
        });

我在代码中放置了未定义的检查来检查对象的状态,它就在那里 - 它似乎落在了 find 中的 lambda 表达式上。

附加信息:这似乎只发生在 PhantomJS 上 - 如果我使用 Chrome 一切运行良好(尽管这不是一个可行的 CI 选项!)。

【问题讨论】:

  • 您是否在代码中的任何地方使用了new?听起来可能是错误消息中的行号错误
  • 可能在我的代码中的不同位置,但不在我正在测试的方法中。错误消息清楚地指向了我正在测试的方法的第 6 行的转换版本。如果出现任何问题,它是 Mocha 似乎产生的少数错误消息之一。我不知道如果 Mocha / Chai / Sinon 只是一堆垃圾,我是否应该回到使用 Jasmine 的翻译。尽管在现阶段这样做是一次大规模的改革。

标签: javascript ecmascript-6 phantomjs mocha.js chai


【解决方案1】:

这似乎是 PhantomJS 的问题。

我通过从这里应用 PhantomJS polyfil 来修复它...

https://www.npmjs.com/package/phantomjs-polyfill-find

(糟透了....)

【讨论】:

    【解决方案2】:

    PhantomJS 可能不支持 Array.prototype.find。在测试助手文件中添加一个 polyfill,它将解决您的问题。 Polyfill on MDN

    【讨论】:

    • 不错的一个!我在同一时间发现了这一点(尽管您可以投票!)
    • 没有问题,PhantomJS 很痛苦,你可能会发现更多不起作用的东西。享受吧!
    • 天哪! (JS 单元测试对我来说是一件又爱又恨的事情)
    • 在使用 mocha 时也遇到了同样的问题。感谢您的回答,节省了很多时间。
    【解决方案3】:

    试试latest version 2.5b,它有一个最新的 Webkit abd 完全支持 ES6。

    【讨论】:

    • 这听起来不错,但我认为它不适合我的带有 Karma 的 NPM 依赖关系树,因此当它在 Azure 中用于 CI 构建时它最终会变得无用(我宁愿有它首先在本地堆中摔倒)。看起来 polyfills 是我目前的前进方向。
    猜你喜欢
    • 2016-08-10
    • 2021-04-14
    • 1970-01-01
    • 2016-05-22
    • 2017-06-29
    • 1970-01-01
    • 2020-07-11
    • 1970-01-01
    • 2015-07-25
    相关资源
    最近更新 更多