Javascript 如何使用mocha测试d3.js？

我有一个脚本，它调用d3.js，然后尝试读取csv：

var d3      = require ("./../../librairies/d3.v2.js")
d3.csv  (   path_to_read, function(data , error)

当我使用mocha对其运行测试时，d3无法执行任何XML请求：

 ReferenceError: XMLHttpRequest is not defined
      at d3_xhr (d3.v2.js:1936:114)

---

如何使用mocha包含和测试d3（我对mocha很陌生）？

您的第一个问题是，由于Node.js不是web浏览器，因此Node.js中没有某些对象。其中一个对象是

XMLHttpRequest

对象。您可以在Node.js中找到一个库，使该对象可用，但我不建议您这样做

第二个问题是D3有时会导致难以测试的代码

为了避免这种情况，您需要以一种易于测试的方式编写D3代码。因此，不是：

d3.csv(path_to_read, function(data, error) {
   // all your code goes here
})

你需要像这样的东西：

// some pure functions (data in d3 elements out)
function renderAxis(data) {
    return {};
}

function renderData(data) {
    return {};
}

function renderSomethingElse(data) {
    return {};
}

// one pure function that uses all the other pure functions
// returns a function that needs to be invoked when data finishes loading
function renderEverything(renderAxisFunc, renderDataFunc, renderSomethingElseFunc) {
   return onDataLoaded(data, error) {
      var axis = renderAxisFunc(data);
      var dataPoints = renderAxisFunc(data);
      var somethingElse = renderSomethingElseFunc(data);
      return {
          axis: axis,
          dataPoints: dataPoints,
          somethingElse: somethingElse
      };
   }
}

// Finally you can use the pure functions
d3.csv(path_to_read, function(data, error) {
   var dataLoaded = renderEverything(renderAxis, renderData, renderSomethingElse)
   var chartElements = dataLoaded(data, error);
   // append chartElements
})

如果您编写了纯函数，测试将变得微不足道：

expect(renderAxis([{/* some mock data */}])).to.eq(/* expected d3 objects*/);
expect(renderData([{/* some mock data */}])).to.eq(/* expected d3 objects*/);
expect(renderSomethingElse([{/* some mock data */}])).to.eq(/* expected d3 objects*/); 

您还可以测试大的一个：

var dataLoaded = renderEverything(
    (data) => { /* mock response */ },
    (data) => { /* mock response */ },
    (data) => { /* mock response */ }
);

expect(data([{/* some mock data */}], false)).to.eq(/* expected d3 objects*/); 

你可能会觉得这很有帮助