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

嘗試使用nextTick后trigger.click因為點擊不是對下一個節拍，你會看到立即的變化，只有處理。