title: JEST test : Update the wrapper after a click event is not working,
body: <p>I'm trying to test the presence of one attribute on my HTML element after a click on this element.
  All my other tests with the click trigger are running properly but this one in which I need check an element attributes changes after a click is not working.</p>
  <pre><code>import Menu from '@/components/MenuItem';
  
  const localVue = createLocalVue();
  const vuetify = new Vuetify();
  
  const Menuitems = [
     new MenuItem('1', 'my first item', false, 'activate'),
     new MenuItem('2', 'my second item', false, 'link'),
     new MenuItem('3', 'my fird item', false, 'event'),
  ];
  
  const buildWrapper = (isShallow = true, propsData = {}) =&gt; {
     const defaultProps = { items: [...items], ...propsData };
     const options = { localVue, vuetify, propsData: defaultProps};
     if (isShallow) {
        return shallowMount(Menu, options);
     }
     return mount(Menu, options);
  };
  </code></pre>
  <p>I have a logic in the component that sets the value of an attribute based on the value of a prop from the MenuItem component.
  I loop trough my list to display all the items.</p>
  <pre><code>   &lt;v-menu data-testid=&quot;menu&quot;&gt;
        &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
           &lt;v-btn color=&quot;primary&quot;
                  v-bind=&quot;attrs&quot; v-on=&quot;on&quot;&gt;
              Menu
           &lt;/v-btn&gt;
        &lt;/template&gt;
        &lt;menu-list class=&quot;menu-items&quot;&gt;
           &lt;template v-slot:items&gt;
              &lt;menu-item v-for=&quot;(item, i) in itemList&quot;
                            :key=&quot;i&quot;
                            data-testid=&quot;menu-item&quot;
                            :title=&quot;item.title&quot;
                            :active=&quot;handleActive(item)&quot;
                            :action=&quot;item.action&quot;
                            :class=&quot;{'menu-item-active': handleActive(item) }&quot;
                            @click=&quot;handleClick(item)&quot;&gt;
              &lt;/menu-item&gt;
           &lt;/template&gt;
        &lt;/menu-list&gt;
     &lt;/v-menu&gt;
  </code></pre>
  <p>and in my component, the setup's logic is straight forward:</p>
  <pre><code>   setup(props){
        const itemList = ref(props.items);
        const handleClick = (item) =&gt; {
       itemList.value.forEach( x =&gt; x.id !== item.id ? x.active = 
            false : x.active = true);
       };
        const handleActive = (item) =&gt; { return item.action !== 
             'activate' ? false : item.active; };
        return { itemList, handleActive };
     }
  </code></pre>
  <p>And here is the test.</p>
  <pre><code>   it(&quot;When the item's prop is 'link', the active style doesn't apply&quot;, async () =&gt; {
        const wrapper = buildWrapper(false, { items });
        await wrapper.find('[data-testid=&quot;menu&quot;]').find('.v-btn').trigger('click');
        const container = wrapper.find('.menu-items-container');
        const item = container.findAll('[data-testid=&quot;menu-item&quot;]').at(1);
        await item.trigger('click');
        await wrapper.vm.$nextTick();
        const updatedContainer = wrapper.find('.menu-item-container');
        const updatedItem = updatedContainer.findAll('[data-testid=&quot;menu-item&quot;]').at(1);
        console.log(updatedItem.attributes());
        expect(true).toBe(true);
     });
  </code></pre>
  <p>In the console this is what I get: the div attributes are not updated after the click on the menu item.</p>
  <pre><code>  console.log
      {
        'data-testid': 'menu-item',
        action: 'activate',
        class: ''
      }
  
        at _callee6$ (src/components/Menu/index.vue.spec.js:90:15)
  
    console.log
      {
        'data-testid': 'menu-item',
        action: 'activate',
        class: ''
      }
  </code></pre>
  <p>Not sure what I'm missing here but I've been looking around and trying all sort of ways to get around this issue.</p>