I'm trying to test a component which holds a tree-hierarchy.

The tree hierarchy is build with <ul/> and <li/> elements.

The highest level of my tree is not hidden, which means that I can see my individual li elements below the first ul element. However, the next nested ul element has a class called myHiddenClass which amongst other things hides the element. When I click on the li element above it, it toggles myHiddenClass on the ul element.

The tree-hierarchy therefore looks something like this:

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

The function unHideUl looks as follows:

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

I've tested the onClick event, and it triggers as it should. Obviously I also tested this functionality with a regular compile, and it works flawless.

My test looks as follows:

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()
})

I have tried printing the wrapper like this console.log(wrapper.debug()) after simulate('click), but also here, none of my ul are having their myHiddenClass removed.

Obviously, I would appreciate if I could get some insights on what I'm doing wrong here - For some reason I can't help thinking that my wrapper may not update after the unHideUl has toggled the class.