Javascript 使用Node.js、JSDOM和Jasmine测试d3

我想测试一下我的node.js/d3应用程序中是否使用jasmine呈现了一个简单的条形图。我是Javascript的初学者，尤其是node.js，希望你能知道我应该做什么

test.js（应该测试的文件）：

var d3 = require('d3');

exports.barChart = function() {
  var that = {};

  that.render = function() {
    var svg = d3.select('body').append('svg')
      .attr('height', '500')
      .attr('width', '500')
      .append('g')
      .attr("transform", "translate(0, 0)");
  };

  return that;
}

var test = require('../javascripts/test');
var d3 = require('d3');

var jsdom = require("jsdom");  
const { JSDOM } = jsdom; // <--- how is jsdom used?

describe('Test d3 with jasmine', function () {

  describe('the svg', function () {

    beforeEach(function() {
      var bar = test.barChart();
      //bar.render();
    });

    it('should be created', function () {
      expect(getSvg()).not.toBeNull()
    });
})

  function getSvg() {
    return d3.select('svg');
  }
})

test-spec.js（此处执行测试）：

var d3 = require('d3');

exports.barChart = function() {
  var that = {};

  that.render = function() {
    var svg = d3.select('body').append('svg')
      .attr('height', '500')
      .attr('width', '500')
      .append('g')
      .attr("transform", "translate(0, 0)");
  };

  return that;
}

var test = require('../javascripts/test');
var d3 = require('d3');

var jsdom = require("jsdom");  
const { JSDOM } = jsdom; // <--- how is jsdom used?

describe('Test d3 with jasmine', function () {

  describe('the svg', function () {

    beforeEach(function() {
      var bar = test.barChart();
      //bar.render();
    });

    it('should be created', function () {
      expect(getSvg()).not.toBeNull()
    });
})

  function getSvg() {
    return d3.select('svg');
  }
})

。。。这是：

   Message:
   ReferenceError: document is not defined

从我在web上的研究中，我了解到发生此错误是因为node.js默认情况下不提供DOM。因此，必须使用JSDOM模拟DOM

不幸的是，我完全不知道从哪里开始。所以我的问题是：如何使用JSDOM呈现条形图，以便Jasmine测试能够执行？此外，我不确定“require”和“exports”的用法是否正确

我的方法的基础是本指南：

---

非常感谢你

我过去也做过类似的事情，并尝试将代码的相关部分列出来，如下所示：

// load the jsdom constructor and d3
const JSDOM = require( 'jsdom' ).JSDOM,
      d3    = require( 'd3' );

// initialize a new document
// wrapper is a generic HTML document serving as the base (not sure, if it is needed in your case)
const jsdom = new JSDOM( wrapper, { runScripts: "outside-only" } );

// get a reference of the document object
const document = jsdom.window.document;

// start with the visualization
d3.select( document )
  .select( 'svg' )
/* ... */

---

从

d3开始很重要。选择（文档）

让d3知道（模拟的）DOM树。否则，我会遇到与您类似的错误。

您提到的指南没有在节点环境中运行测试。它使用Karma运行测试，即测试本身在浏览器中进行评估。除非您知道自己在做什么，否则我建议不要接触JSDOM，而是使用真正的DOM。