Vue 测试无法触发点击 <div>

Question

我尝试测试手风琴。

想测试一下点击后手风琴是否塌陷。

 <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;
    }
  },

...

测试

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

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

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

    })

我试图窥探我的功能。它有效，但已贬值。 所以我猜我的函数被调用了但是测试的结果是错误的

  Expected: true
    Received: false

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

如您所见，该值为 false，用户单击，运行切换方法，因此预期应为 true。但是，收到的仍然是假的，好像用户没有点击一样

Answer 1

尝试在trigger.click 之后使用nextTick，因为点击不会立即处理，只有在下一次滴答时您才会看到变化。