Vue test can't trigger click on <div>

Question

I try to test an accordion.

would like to test if the accordion collapse after a click.

 <template>
    <div :id="accordionName">
    
      <div class="card mb-4">
    
    
        <div class="card-header" @click.prevent="accordionToggle()" data-toggle="collapse" data-target="accordionTarget">
          <h5 ref="title" class="float-left">
            {{title}}
          </h5>
          <span class="float-right" v-show="!accordionActive">
            <font-awesome-icon icon="chevron-left" /></span>
          <span class="float-right" v-show="accordionActive">
            <font-awesome-icon icon="chevron-down" /></span>
        </div>
    
          <div id="accordionTarget" class="collapse show" v-show="accordionActive">
            <div class="card-body">
              <slot>
                <!-- The content will be here -->
              </slot>
            </div>
          </div>
    
      </div>
    
    </div>
</template>
<script>
export default {
  name: 'LayoutCard',
  data() {
    return {
      accordionActive: null
    }
  },
  props: {
    title: {
      required: true
    },
    active: {
      default: false
    }
  },
  computed: {
...
  methods: {
    assignPropsToData() {
      this.accordionActive = this.active;
    },
    accordionToggle() {
      this.accordionActive = !this.accordionActive;
    }
  },

...

The test

it("check user click", () => {
      const wrapper = factory({
        active: false
      })

      wrapper.find('.button').trigger('click')

      expect(wrapper.find('.card-body').isVisible()).toBe(true)

    })

I tried to spy my function. It's works but it's depreciated. So I guess my function is called but the result of the test is wrong

  Expected: true
    Received: false

      41 |       wrapper.find('.button').trigger('click')
      42 | 
    > 43 |       expect(wrapper.find('.card-body').isVisible()).toBe(true)
         |                                                      ^
      44 | 
      45 |     })
      46 | 

As you can see the value is false, the user click, run the toggle method so the expected should be true. However, the received is still false as if the user didn't click

Answer 1

尝试使用nextTick后trigger.click因为点击不是对下一个节拍，你会看到立即的变化，只有处理。