Тест с reactjs renderIntoDocument сохранить не удалось из - за требуемого DOM

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

renderIntoDocument

ReactComponent renderIntoDocument(
  ReactElement instance
)

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

Примечание.: Тебе понадобится окно, окно.документ и окно.документ.createElement глобально доступен перед импортом React. В противном случае 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);
  });
});
13
expect.js mocha reactjs

2 ответов

tl; dr;вам нужно jsdom + Mocha.

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

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

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

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

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

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

ссылки:

  1. руководство: тестирование реагировать на Jsdom
  2. React Spec:ReactTestUtils#renderIntoDocument
  3. информация: как шутку
  4. информация: реагировать-тестирование-mocha-jsdom
13

вам нужен дом. К счастью, jsdomify позволяет легко прикрепить DOM к глобалам в узле.

Предположим у нас есть простой компонент:

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();
});
2