undefined不是PhantomJS上Mocha / Chai / Sinon的构造函数,带有Array.prototype.find

时间:2017-02-09 19:18:09

标签: javascript ecmascript-6 phantomjs mocha chai

我现在正处理这个严重的问题。我在一个方法中有一行代码我试图测试哪些我无法通过我做的任何事情。有用!在现实世界中没有任何问题。

我发现每次深入研究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会因为它有用而导致错误消息&# 39; undefined不是构造函数'输入消息。完整的错误如下......

  

PhantomJS 2.1.1(Windows 8 0.0.0)MapsManager可以使用加载的地图进行交互,以直接映射轮毂点周围的停靠点,并使用链接的停止点映射显示选定的链接停靠点的区域中的所有可选停靠点FAILED           undefined不是构造函数(评估' homeStops.find(function(hs){                                       return hs.id === element.id;                                   })&#39)

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

  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");
        });

我已经在代码中放置了未定义的检查以检查对象的状态,并且它在那里 - 似乎它在查找中落在lambda表达式上。

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

3 个答案:

答案 0 :(得分:4)

这似乎与PhantomJS有关。

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

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

(吮吸....)

答案 1 :(得分:2)

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

答案 2 :(得分:0)

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