Тестирование реагируемое с помощью библиотеки тестирования реакции

Question

Как проверить этот компонент: https://github.com/lovasoa/react-contenteditable? Как имитировать действия пользователя c в тестовой среде? Я пробовал следующее:

// The given element does not have a value setter
fireEvent.change(sourceContent, {
  target: { value: "New content text" }
});

// This doesn't emit onChange Changes text content but onChange is not fired.
fireEvent.change(sourceContent, {
  target: { textContent: "New content text" }
});

// This doesn't emit onChange. Changes inner html but onChange is not fired.
fireEvent.change(sourceContent, {
  target: { innerHTML: "New content text" }
});

Все вышеперечисленное - провальные тесты. Я думал, что если я изменю внутренний HTML, то функция, предусмотренная в onChange, будет запущена. Это пример проекта с этой проблемой: https://codesandbox.io/s/ecstatic-bush-m42hw?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Невозможно смоделировать события на contenteditable с testing-react-library или любой библиотеке тестирования, которая использует js-dom, из-за ограничения на js-dom.

См. Обсуждение здесь и здесь .

Решением будет использование puppeteer или другого метода, который использует реальный браузер для рендеринга.

Answer 2

Похоже, что для тестирования ввода вы должны использовать fireEvent.input. Итак, следующее:

// This doesn't emit onChange. Changes inner html but onChange is not fired.
fireEvent.change(sourceContent, {
  target: { innerHTML: "New content text" }
});

Будет хорошим способом ввода имени пользователя c.