Фермент: Как проверить взаимодействие на мелком компоненте

Question

Я хочу проверить некоторые базовые возможности взаимодействия с пользовательским интерфейсом моего списка.

Я хочу проверить, установлен ли данный флажок «выбрать все»работает, используя Enzyme + Jest с мелким корневым объектом.

Предварительно проверяю, ничего не выбрано.Это хорошо работает:

const allBox = list.find('Checkbox.select-all')
expect(allBox.prop('checked')).toBe(false)
mainRows.find('Checkbox').forEach( (node) => {
    expect(node.prop('checked')).toBe(false)
})

Но я не могу вызвать «щелчок» (или «изменение») на этом главном флажке…

allBox.simulate('click')`

Я подозреваю, потому что флажок все еще поверхностный <Checkbox> не фактический html-иш <input type='checkbox'…>.

Но что я могу сделать?

Монтирование (фактически рендеринг) всего компонента списка будетстать огромным.Могу ли я как-то просто смонтировать (довольно крошечный) подкомпонент Checkbox, чтобы затем запустить его события?И / или мне нужно .dive () ?

Что-нибудь еще до expect(), если все выбрано сейчас?

Свойства checkedразличные <Checkbox> связаны с состоянием компонента.Так мне нужно list.instance().update()?Или даже .forceUpdate()?→ Есть некоторое обсуждение энзимного трекера , о том, работает ли /update ()…

В любом случае, мне не повезло :

Expected value to be:       true
Received:                   false

  180 |         allBox.simulate('change')
  181 |         list.instance().forceUpdate()
  182 | 
> 183 |         expect(allBox.prop('checked')).toBe(true)
  184 |         // verify, that did the job:
  185 |         mainRows.find('Checkbox').forEach( (node) => {
  186 |             expect(node.prop('checked')).toBe(true)

Answer 1

«изменить», а не «щелкнуть»

Ну, во-первых, мне нужно смоделировать «изменение», а не «щелчок».Поскольку компонент <Checkbox> во всей своей полноте имеет только обработчик Change .(этот щелчок приведет к изменению, верно только в том случае, если оно превратилось в настоящий html… sinca, то есть то, что делает <input type="checkbox…>)

---

Теперь к основной проблеме:

list.find ('. List-botombar'). Find ('Checkbox.select-all'). Debug ()

<Checkbox className="select-all" checked={false}…

Давайте запустим изменение:

list.find ('. List-botombar'). Find ('Checkbox.select-all'). Simulate ('change')

У нас все хорошо?

list.find ('. List-botombar'). Find ('Checkbox.select-all'). Debug ()

Да!

<Checkbox className="select-all" checked={true}…

Будет ли при использовании стенографии то же самое?

bottomBar.find ('Checkbox.select-all'). Debug ()

<Checkbox className="select-all" checked={false}…

НЕТ! Так что @konekoya прав, вы должны продолжать поиск по находке, предварительные сокращения не допускаются.(Хм. Ха. Это где-нибудь в документах?!?)

---

Поможет ли обновление [force]?(Спойлер: №)

bottomBar.update ()

Error: ShallowWrapper::update() can only be called on the root

Fine, затем

list.update () bottomBar.find ('Checkbox.select-all'). debug ()

<Checkbox className="select-all" checked={false}…

Не повезло.

list.instance (). update () TypeError:list.instance (...). update не является функцией list.instance (). forceUpdate () bottomBar.find ('Checkbox.select-all'). debug ()

<Checkbox className="select-all" checked={false}…

(хотя флажок все еще установлен, как и выше, длинный запрос все еще проверяет)

Погружение также не помогает.

tl; dr;Любой ярлык к старому списку - это просто ярлык для устаревших данных.Нужно find() от корневого элемента снова и снова.

---

PS Кто-то в курсе от фермента совершенно явно подтверждает это

, когда выиспользуйте .find в v2, вы получаете оболочку, которая обновляется автоматически при обновлении корневой оболочки.В v3 он неизменный, поэтому вам нужно повторно найти его в корне, чтобы увидеть отраженные изменения.