Question

我有一个相当简单的VueJS组件，称为“ Reveal”；它会隐藏一条消息，直到有人单击它为止，就像这样：

<template>
<div>
    <div v-show="!isShowing">
        <span v-on:click="show">ANSWER (Click to reveal)</span>
    </div>
    <div v-show="isShowing">
        <span v-on:click="hide">{{ message }} (Click to hide)</span>
    </div>
</div>
</template>

<script>
export default {
    props: ['message'],
    data() {
        return {
            isShowing: false
        };
    },
    methods: {
        show: function() {
            this.isShowing = true;
        },
        hide: function() {
            this.isShowing = false;
        }
    }
}
</script>

现在，我正在尝试使用Mocha + Chai使用以下Reveal.spec.js对其进行测试，如下所示：

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import Reveal from '@/components/Reveal.vue'

describe('Reveal.vue', () => {
  it('doesn\'t reveal the message when instantiated', () => {
    const msg = 'secret message'
    const wrapper = shallowMount(Reveal, {
      propsData: { 
        message: msg
      }
    })

    const spans = wrapper.findAll('span')
    expect(spans.length).to.equal(2);

    expect(spans.at(0).text()).to.include("ANSWER");
    expect(spans.at(0).isVisible()).to.be.true;

    expect(spans.at(1).text()).to.include(msg);
    expect(spans.at(1).isVisible()).to.be.false;
  })

  it('reveals the message when clicked', () => {
    const msg = 'secret message'
    const wrapper = shallowMount(Reveal, {
      propsData: {
        message: msg 
      }
    })
    wrapper.trigger('click')

    const spans = wrapper.findAll('span')
    expect(spans.length).to.equal(2);

    expect(spans.at(0).text()).to.include("ANSWER");
    expect(spans.at(0).isVisible()).to.be.false;

    expect(spans.at(1).text()).to.include(msg);
    expect(spans.at(1).isVisible()).to.be.true;
  })
})

我的问题是，对wrapper.trigger（）的调用似乎并没有真正触发点击-或者，也许更准确地说，“ v-show”似乎没有准确反映在生成的DOM中节点，因为即使单击后isShowing布尔值应该翻转其值，第一个跨度仍保持可见。

我绝对确定我误会了这里发生的事情，因为这种简单的事情应该非常直观明了。我要去哪里错了？

Answer 1

trigger在包装的根元素上调度一个Event。您的事件监听器位于span元素上，因此在调用find之前，您需要使用span访问包含trigger元素的Wrapper：

const spans = wrapper.findAll('span')

spans.at(1).trigger('click')

单元测试VueJS组件似乎未注册click（）调用

1 个答案: