Question

我想测试我的组件Vuejs。我使用avoriaz，jsdom，mocha和chai。

<template>
<div id="test-event" class="test-event">
<button id="button" v-on:click="plusClick" v-bind:value="click_count">{{click_count + " elements"}}
</button>
</div>
</template>

<script>
export default {
    data () {
        click_count: 0
    },

methods: {
        plusClick(event) {
            console.log("element = ", this.click_count)
            return this.click_count = Number(event.target.value) + Number(1);
        },
       get_click_count() {
            console.log(" => ", this.click_count);
            return this.click_count;
        },

watch : {
        click_count: function(element) {
            console.log("element = ", element);
        }
    }
</script>

我的单元测试

it('render button be called ', function() {

    const wrapper = mount(Bar);    
    expect(wrapper.contains('#test-event')).to.equal(true);  //ok
    var test_event = wrapper.find('#test-event');            //ok
    expect(test_event[0].contains('button')).to.equal(true); //ok
    var button_test = test_event[0].find('button')[0];       //ok

    button_test.simulate('click');  // element = 0
    button_test.simulate('click');  // element = 1

    console.log( wrapper.data().click_count );     // 0
    console.log( wrapper.methods.get_click_count() ): 
    // error wrapper.methods.get_click_count() is not a function
    console.log( wrapper.methods.get_click_count ): // undefined
    button_test.simulate('click'); // element = 3
    button_test.simulate('click'); // element = 4

});

我想检索click_count更新的值，但是......我怎样才能捕获这个值？

Answer 1

据我所知Vue.js，我会尝试：

wrapper.get_click_count()调用真正的方法，

wrapper.$data.click_count获取值click_count：

Answer 2

wrapper.vm.get_click_count会调用该方法。

wrapper.vm.click_count或wrapper.data().click_count将检索数据。

还有.methods() method。虽然调用使用this的方法时存在问题。

如何返回我的vuejs组件上更新的数据

2 个答案: