jeudi 24 mai 2018

Enzyme: How to test interactions on shallow component

Basically I want to test, that a 'select all' checkbox works, using Enzyme+Jest with a shallow root object.

enter image description here

I want to test some basic UI interaction with my list component.

1) Verifying, that no checkbox at all is selected beforehand, does work:

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

But I can't trigger a click i.e.

allBox.simulate('click')`

because Checkbox is of course still a shallow <Checkbox> not an actual html-ish <input type='checkbox'…>.

What can I do?

Mounting (actually rendering) the entire list component will become to vast. Can I somehow just mount the tiny https://ift.tt/2scp76Z)

Anything else before expect()ing that all is selected now?

Do I need to list.instance().forceUpdate()? There is some discussion on the Enzyme tracker, on wether/how .update() works…

Anyway, no luck for me:

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)

Aucun commentaire:

Enregistrer un commentaire