Estoy tratando de probar un componente que tiene una jerarquía de árbol.

La jerarquía del árbol se construye con elementos <ul/> y <li/> .

El nivel más alto de mi árbol no está oculto, lo que significa que puedo ver mis elementos li individuales debajo del primer elemento ul . Sin embargo, el siguiente elemento ul anidado tiene una clase llamada myHiddenClass que, entre otras cosas, oculta el elemento. Cuando hago clic en el elemento li que se encuentra arriba, cambia myHiddenClass al elemento ul .

Por lo tanto, la jerarquía de árboles se parece a esto:

 <ul> <li onClick={(e) => unHideUl(e)}></li> <ul className='myHiddenClass'> <li></li> ... </ul> </ul>

La función unHideUl tiene el siguiente aspecto:

 const unHideUl = (e) => { e.stopPropagation() e.target.nextSibling.classList.toggle('myHiddenClass') }

He probado el evento onClick y se activa como debería. Obviamente, también probé esta funcionalidad con una compilación normal y funciona perfectamente.

Mi prueba se ve de la siguiente manera:

 let wrapper beforeEach(() => { wrapper = mount(<MyComponent/>) }); afterEach(() => { wrapper.unmount(); }) test('Expect to be expanded', () => { const item = wrapper.find('li').first() item.simulate('click') const uList = wrapper.find('ul').first().children().find('ul').first() expect(uList.hasClass('myHiddenClass')).toBeFalsy() })

He intentado imprimir el envoltorio como este console.log(wrapper.debug()) después de simulate('click) , pero también aquí, ninguno de mis ul tiene su myHiddenClass eliminado.

Obviamente, agradecería si pudiera obtener algunas ideas sobre lo que estoy haciendo mal aquí. Por alguna razón, no puedo evitar pensar que mi contenedor puede no actualizarse después de unHideUl haya cambiado la clase.