Как проверить ребенка Реагировать компонент, созданный в Рендер с React.createElement()

Question

Я пытаюсь проверить пользовательский реагировать элемент построен на вершине некоторых одноранговой Реагировать элементы Код:

return (
    React.createElement("div", {className: classes}, 
     React.createElement(TextField, { 
      ref: "omniTextBox", 
      className: "menu-textfield", 
      onChange: this._onControlChange 
     }), 
    ) 
); 

this._onControlChange управляет состоянием на основе значения текстового поля. Это то, что я хочу протестировать, с различным вводом в текстовое поле, запускающим различное состояние компонента.

код Jest:

var customComponent = TestUtils.renderIntoDocument(<CustomField />); 
var customField = TestUtils.findRenderedComponentWithType(customComponent, customField); 
TestUtils.Simulate.change(customField, {target: {value: 'Hello, world'}}); 

Я пытался издеваться функцию _onControlChange, чтобы увидеть, если она называется, она называется 0 раз. Я также попытался увидеть состояние customField var до и после вызова simulate(), и ничего не меняется. Интересно, не хватает ли я чего-то, чтобы симулировать ввод текста в текстовом поле?

Я пробовал все варианты выбора по тегу, типу и классу без каких-либо успехов. Я могу увидеть элемент textfield, когда console.log предоставленный компонент. Есть ли способ захватить экземпляр TextField через ref?

Answer 1

Вы, кажется, неправильно использовали TestUtils.findRenderedComponentWithType. Поле ввода в вашем пользовательском компоненте на самом деле является TextField.

var txtField = TestUtils.findRenderedDOMComponentWithType(customComponent, TextField); 
TestUtils.Simulate.change(txtField, {target: {value: 'Hello, world'}}); 

Вы также переопределение customField, таким образом, почему я изменил имя переменной здесь.