React Testing Library: как протестировать компонент react-quill

Компонент

Итак, у меня есть компонент вызова ReactQuill, приведу краткий пример кода (прим. Editor/index.js)

...
import ReactQuill from 'react-quill'
const Editor=({value, onChange, ...other})=>{
const handleOnChange=(val)=>{
onChange(val)
}

const modules={...}

return (
<ReactQuill
value={value}
onChange={handleOnChange}
modules={modules}
{...other}
/> )
})

Здесь всё просто, на изменение поля я вызываю кастомный обработчик (onChange), в который передается текущее значение.

Тестирование

Далее нужно протестировать событие onChange. В этой же папке компонента создаю папку и файл для теста: Editor/__tests__/Editor.test.js. Теперь добираюсь до элемента, который содержит текст (см. рис), т.е мне нужно получить элемент с классом ql-editor

Рис 1

Пишу код для теста, файл Editor.test.js

import '@testing-library/jest-dom'

import render from 'helpers/render'

import Editor from '..'

describe('ReactQuill testing',()=>{
// it аналог test

it('check editor event',()=>{
// рендерим компонент, я использую кастомный рендер
const {getByText}=render(<Editor/>)
// контент для эдитора
const editorContent='Lorem ipsum'
// ищем элемент по классу ql-editor и берем самый первый найденный
const editorMain=document.getElementsByClassName('ql-editor')[0]
// далее нам нужно получить дочерний элемент (см. рис 2)
const editorText=editorMain.childNodes[0]
// теперь вставляем в него наш текст, здесь и сработает event onChange
editorText.innerHTML=editorContent
// теперь пишем, что наш текст должен быть в документе
expect(getByText(editorContent)).toBeInTheDocument()
})
})

Рис 2

Запускаем тест, смотрим отладку, текст на месте.

Рис 3

Всё готово, тест пройден успешно.

Вы также можете проверить, что выводит ваш тест с помощью следующего кода:

для конкретного элемента (отобразит как раз то, что на рисунке выше):

screen.debug(editorMain)

для всего компонента:

screen.debug()

Не забудьте импортировать screen

import {screen} from '@testing-library/react'