Реакт - проверка Владельца Владельца

Question

Пытается использовать тестовые утилиты Реагента (https://facebook.github.io/react/docs/test-utils.html) для проверки моего компонента.

У нас есть Владелец и Собственник.

Владелец делает:

<Ownee> 
    <div class="inner"> 
     <div class="moreInner" /> 
    </div> 
</Ownee> 

Мой тест, как например:

var comp = TestUtils.renderIntoDocument(<Owner />); 
var innerClass = TestUtils.findRenderedDOMComponentWithClass(comp, "inner"); 
expect(innterClass).to.not.be.null; 

В идеале, это должно работать нормально. Но на самом деле он выводит: «Не нашел ровно одного совпадения (найдено: 0)».

Так что, если я удалить <Ownee></Ownee> выше, так это как:

<div class="inner"> 
     <div class="moreInner" /> 
    </div> 

Он работает, как ожидалось, но я не могу использовать это (должен оказывать элемент Ownee тоже).

Ownee делает что-то вроде так:

<div class="inner"> 
    {this.props.children} 
</div> 

Любые предложения о том, как использовать TestUtils, чтобы получить желаемый результат (т.е. тест работает и найти DIV классом)?

Спасибо!

Answer 1

Таким образом, проблема была не владельцем/владельцем. В итоге оказалось, что я использовал модальный диалог React-Bootstrap (как владелец). Итак, что произошло, это тест, который будет отображать компонент, но он будет помещен в другое дерево компонентов.

Чтобы обойти эту проблему, я последовал вопрос ранее спросил: Testing a React Modal component

В частности, ответ user1778856 в.

var stubModal =() => { 
    var createElement = React.createElement; 
    modalStub = sinon.stub(React, 'createElement', function (elem: any) { 
     return elem === ModalDialog ? 
      React.DOM.div.apply(this, [].slice.call(arguments, 1)) : 
      createElement.apply(this, arguments); 
    }); 
    return modalStub; 
}; 
var stubModalRestore =() => { 
    if (modalStub) { 
     modalStub.restore(); 
     modalStub = undefined; 
    } else { 
     console.error('Cannot restore nonexistent modalStub'); 
    } 
}; 

before(() => { stubModal(); }); 
after(() => { stubModalRestore(); }); 

Другие ссылки: Unit testing React Bootstrap modal dialog