Нарушение инварианта при тестировании React с использованием Mocha

Я пытаюсь настроить проект React с помощью Electron, и я только начал пытаться настроить Mocha в качестве своей тестовой среды.

Все хорошо, если я запускаю:

  "test": "mocha -w --require babel-core/register --require ignore-styles ./app/test/helpers/browser.js ./app/**/*.spec.js --colors --growl"

и в моем файле спецификаций есть простое описание и утверждение, что 1 равно 1.

Проблема возникает, когда я пытаюсь включить компонент реакции:

import style from './app.scss';
import React from 'react';
import {render} from 'react-dom';

export default class App extends React.Component {

  render () {
    return (
      <div>
        <h1 className={style.title}> Hello World </h1>
      </div>
    )
  }
}

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

Когда это включено в мой тест, даже до того, как я его смонтирую, я получаю:

Нарушение инварианта: _registerComponent(...): целевой контейнер не является элементом DOM.

Я использую jsdom и настраиваю среду своего браузера, например:

import { jsdom } from 'jsdom'

const exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

reactjs javascript jsdom mocha.js
person CWright    schedule 28.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

При настройке JSDom вы можете предоставить объект конфигурации для jsdom.env, или в моем случае я просто предоставил html-шаблон для jsom():

global.document = jsdom("<!doctype html><html><body><div id='app'></div></body></html>");

В соответствии с документами вы также можете настроить его следующим образом:

jsdom.env(
  "https://iojs.org/dist/",
  ["http://code.jquery.com/jquery.js"],
  function (err, window) {
    console.log("there have been", window.$("a").length - 4, "io.js releases!");
  }
);

где шаблон извлекается из URL-адреса или:

var jsdom = require("jsdom");

jsdom.env(
  '<p><a class="the-link" href="https://github.com/tmpvar/jsdom">jsdom!</a></p>',
  ["http://code.jquery.com/jquery.js"],
  function (err, window) {
    console.log("contents of a.the-link:", window.$("a.the-link").text());
  }
);

Использование статического HTML.

Он также предоставляет менее подробный метод, который я использовал:

var jsdom = require("jsdom").jsdom;
var doc = jsdom(markup, options);
var window = doc.defaultView;

Где разметка — это просто HTML.

person CWright    schedule 28.08.2016