Управление DOM неконтролируемого компонента react

#reactjs #enzyme #react-dom

#reactjs #фермент #react-dom

Вопрос:

У меня есть компонент react, который, по сути, отображает редактируемый div. Это неконтролируемо в том смысле, что react не контролирует содержимое div.

 class UncontrolledDiv extends React.Component<{}, void>{
   public render(): JSX.Element {
      return (<div contentEditable='true'></div>);
   }
}
  

[Это упрощенная версия div с возможностью редактирования содержимого, которую я написал]

У меня есть функциональность, которая очищает содержимое div при нажатии кнопки. Я хочу провести модульное тестирование того же самого, и поэтому я хочу манипулировать dom, фактически добавляя содержимое в div и проверяя, очищается ли оно при нажатии кнопки.

Любые указания относительно того, как я могу этого добиться?

PS: Я использую enzyme в качестве тестовой платформы

Комментарии:

1. откуда берется содержимое внутри div в вашем обычном потоке?

2. Человек будет вводить текст в div.

3. Да, как вы его храните? У вас это как состояние или реквизит?

4. Это сводится к этому компоненту как к опоре. Это компонент без состояния. В компоненте, который использует родительский компонент, есть функция изменения, которая обновляет его состояние и передает его этому компоненту.

5. добавление текста по умолчанию в ваш div помогло бы. Просто передайте реквизиты из родительского элемента в этот редактируемый div.