使用 d3 和 Karma 测试 javascript

Question

我正在尝试使用 Karma 来测试使用 d3.js 绘制图表的简单脚本。该脚本使用 browserify 导入 d3.

var d3 = require('d3');
// Some code...

我已将 Karma 配置为使用 browserify 和 PhantomJS 来运行测试此文件，但是无论配置如何，它总是失败并出现此错误：

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
TypeError: 'null' is not an object (evaluating 'node.getAttribute')

我尝试使用 browserify-shim，但没有任何区别。这是我的 karma.conf.js:

的摘录

frameworks: ['browserify', 'mocha'],

files: [
  'src/static/js/*.js',
  'test/js/*.js'
],

preprocessors: {
  'src/static/js/*.js': ['browserify'],
  'test/js/*.js': ['browserify']
},

browserify: {
  debug: true,
  transform: ['debowerify', 'browserify-shim']
},

browsers: ['PhantomJS']

如果能帮助解决这个问题，我们将不胜感激。只是为了澄清，实际代码工作正常，它只是通过 Karma 中断。

Answer 1

问题是我试图测试的脚本在 HTML body 的末尾加载并使用 d3 自动触发函数。当运行到 Karma 它在之前注入脚本 DOM 已经加载，这导致 d3 失败，因为它期待一个DOM 元素存在。

修复方法是从脚本中删除函数调用并将其添加到我的 HTML body:

<body>  <script> myFunction(); </script> </body>

由于 browserify 使事情变得尴尬，您还必须将函数附加到 window 对象以便从脚本外部调用它：

window.myFunction = function() { // code }

这现在可以在浏览器和使用 Karma 中使用。

使用 d3 和 Karma 测试 javascript

Testing javascript using d3 with Karma

javascript

d3.js

browserify

karma-runner

browserify-shim