Тестирование JavaScript с использованием D3 с кармой

Я пытаюсь использовать 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 что это ломается.

Источник

1 ответ

Решение

Проблема заключалась в том, что скрипт, который я пытался проверить, загружался в конце HTML body и автоматически вызывая функцию с помощью d3, Когда пробежал Karma он вводит сценарий до того, как DOM загрузил, что вызывает d3 потерпеть неудачу, как он ожидал DOM элемент для существования.

Исправление состояло в том, чтобы удалить вызов функции из скрипта и добавить его в конце моего HTML body:

<body>
    <!-- HTML code -->
    <script>
        myFunction();
    </script>
</body>

поскольку browserify делает вещи неловкими, вы также должны прикрепить функцию к объекту окна, чтобы вызвать ее из-за пределов скрипта:

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

Теперь это работает как в браузере, так и с использованием кармы.

Источник
Другие вопросы по тегам