Тест с реакцией renderIntoDocument не удается из-за требуемого DOM

Я новичок в реакцииJS и пытаюсь научиться тестировать с ним. Я использую следующий метод тестирования. Однако я продолжаю получать ту же ошибку message:ReferenceError: document is not defined.

renderIntoDocument

ReactComponent renderIntoDocument(
  ReactElement instance
)

Отнести компонент в отдельный DOM node в документе. Для этой функции требуется DOM.

Примечание: Перед импортом React вам нужно будет иметь окно, window.document и window.document.createElement глобально. В противном случае React будет думать, что он не может получить доступ к DOM, и методы, подобные setState, не будут работать.

Я знаю, что это причина, из-за которой отсутствует его DOM, но как я могу вставить DOM или потребовать его?

Мой тест ниже:

import expect from 'expect.js';
import React from 'react';
import Header from '../../components/header';
import {renderShallow} from './help';
import ReactAddOn from 'react/addons';

var TestUtils = ReactAddOn.addons.TestUtils;

describe('Test react', function() {
  let component;

  beforeEach(()=>{
    component = TestUtils.renderIntoDocument(<Header></Header>);
  });


  it('Test if the content been correclty render', function() {
    console.log(component);
  });
});

Ответ 1

ТЛ; дг; Вам нужно jsdom + Mocha.

Согласно спецификации ReactTestUtils#renderIntoDocument,

renderIntoDocument() требует DOM:

Вам нужно будет иметь окно, window.document и window.document.createElement глобально доступным, прежде чем импортировать React. В противном случае React будет думать, что он не может получить доступ к DOM, и методы, подобные setState, не будут работать.

Традиционно модульное тестирование в React выполняется с помощью Jest, который, по-видимому, содержит поддержку DOM. А Mocha нет.

Чтобы понять это, рассмотрите это слишком упростить аналогию, Jest= Mocha + jsdom.

jsdom реализован в JavaScript, у нас может быть DOM-подобный API для работы без необходимости использования браузера. Это означает, что нам не нужно захватывать браузер в порядке тестирования, например Karma (поэтому он работает в тот момент, когда вы используете Karma). Следовательно, мы можем запускать наши тесты в средах без браузеров, например, в Node или в условиях постоянной интеграции.

Литература:

Учебное пособие: Тестирование на Jsdom
React Spec: ReactTestUtils # renderIntoDocument
Информация: Как помешать
Информация: реакция-тестирование-мокко-jsdom

Ответ 2

Вам нужен DOM. К счастью, jsdomify упрощает прикрепление DOM к вашим глобальным переменным в Node.

Предположим, что мы имеем простую компоненту:

var React = require('react');
module.exports = React.createClass({
  displayName: 'Foo',

  componentDidMount: function() {
    console.log('componentDidMount called');
  },
  render: function() {
    return (
      <p>hello world</p>
    );
  }
});

Мы можем проверить это с помощью renderIntoDocument. Вот пример использования ленты:

var jsdomify = require('jsdomify').default;
// We don't want to require React until we've set up the DOM
// (see the jsdomify docs).
var React;

var test = require('tape');

test('Render a Foo component with full react lifecycle', function (t) {
  jsdomify.create();
  React = require('react');

  var Foo = require('../Foo.jsx');

  // Full render to trigger componentDidMount.
  var ReactTestUtils = require('react-addons-test-utils');
  var renderer = ReactTestUtils.renderIntoDocument(<Foo/>);
  var result = renderer.render();

  // Cleans up global variables inserted by jsdomify.create.
  jsdomify.destroy();

  t.equal(result.props.children, 'hello world');
  t.end();
});