4

Я использую Karma для проверки кода ES6. Но когда я добавить karma-coverage в смесь нужно добавить все исходные файлы для инструмента покрытия, чтобы сделать полезный доклад, но когда я делаю, что карма дает мне эту ошибку во всех браузерах:Karma покрытие и babel + браузерная предварительная обработка

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR 
    Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element. 
    at /var/folders/55/9_128mq95kz1q_2_vwy7qllw0000gn/T/41cf272955d73fbba8ad1df941172139.browserify:46444:0 <- ../../node_modules/react/lib/invariant.js:49:0 

моя карма конфиг файл:

basePath: '', 
browserNoActivityTimeout: 100000, 
frameworks: ['phantomjs-shim', 'mocha', 'chai', 'browserify'], 
files: [ 
    './client/**/*.js', 
    './client/**/*.spec.js' 
], 
exclude: [ 
    './client/dist/*.js', 
], 
preprocessors: { 
    './client/**/*.js': ['browserify', 'sourcemap', 'coverage'] 
}, 
browserify: { 
    debug: true, 
    transform: [ 
    ['babelify', { 
     optional: ["runtime"], 
     plugins: ["rewire"] 
    }], 
    ] 
}, 
coverageReporter: { 
    instrumenters: { isparta : require('isparta') }, 
    instrumenter: { 
    '**/*.js': 'isparta' 
    }, 
    type : 'html', 
    dir : './coverage/' 
}, 
reporters: ['mocha', 'coverage'], 
port: 9876, 
colors: true, 
logLevel: config.LOG_INFO, 
autoWatch: false, 
browsers: ['Chrome', 'Firefox', 'Safari', 'PhantomJS'], 
singleRun: true 

Если удалить './client/**/*.js', из массива files тесты работают, но тогда охват только показать мне код тестов. Я использую Karma от gulp с gulp-karma, но я полагаю, что это не имеет ничего общего с проблемой.

+1

Это, кажется, ошибка, связанная с методом '_registerComponent', чем само покрытие. Кроме того, ваш препроцессор для './client/**/*. Js'' будет запускать покрытие на весь ваш код, включая ваши файлы спецификаций. Лучший способ отладить ошибку - установить «singleRun» на «false» и просмотреть браузер, который запускает тест. Там вы увидите кнопку «отладки», которая откроет другое окно. Оттуда вы проверяете фактический код, который проходит проверку. Что касается исправления проблемы с покрытием, я работаю над тем, что сам не нашел реального решения. Мне любопытно узнать, какие ошибки вы получите после того, как вы исправите это. –

+0

Спасибо за помощь. Фактическая проблема, похоже, является ошибкой с плагином Browserify кармы, который неправильно отображает зависимости. Я думаю, что пока я буду заниматься без покрытия в своих тестах, поскольку у меня есть другие приоритеты прямо сейчас. – Roc

+1

Борьба реальна с этим ... Старался понять это уже некоторое время. – Glitches

ответ

0

У меня была та же проблема, которая в моем случае произошла, потому что React не смог найти элемент, в котором он должен был отображать html.

я нашел быстро исправить, добавив следующее, если заявление в мой главный JS файл:

if ($('#container').length <= 0) { 
    $('body').prepend('<div id="container"></div>'); 
} 

ReactDom.render(
    <App />, 
    document.getElementById('container') 
); 

Я знаю, что это не должно быть лучший способ ее определения, но, по крайней мере, он работает сейчас , Если кто-то знает лучший способ, сообщите нам об этом!

0

Код, который вы накрываете, пытается отобразить компонент в узел DOM. Ваш код полагает, что он уже существует (где-то в index.html или что-то еще). Но PhantomJS не может найти этот узел DOM. Вы должны создать его перед вызовом ReactDOM.render или выполнить поиск, как изменить шаблон html-страницы, используемой фантомом, для запуска тестов (есть плагины doung this).

Смежные вопросы