javascript - Vuejs 测试 - Ava - 更改 propData

Question

我试图更改传递给组件的 propData 以监视和检查组件。

我希望此代码块中的最后一个控制台日志为 5，但仍为 2。

import Vue from 'vue';
import test from 'ava';

import AnimateNumber from './../src/components/AnimateNumber.vue';

function instance(propsData) {
    let N = Vue.extend(AnimateNumber);
    return new N({propsData});
}

test('..', t => {

    let vm2 = new Vue({
        data: {
            a: 2
        }
    });

    let vm = instance({number: vm2.a}).$mount();

    // vm.displayNumber is just a copy of the number prop passed in.
    console.log(vm.displayNumber); // 2

    // Set to 5
    Vue.set(vm2, 'a', 5);

    console.log(vm2.a); // 5

    Vue.nextTick(function () {
        console.log(vm.displayNumber); // 2 (Expected 5)
    });

});

Answer 1

我会使用汽油来测试 vue js 组件https://github.com/MGMonge/petrol

在这种情况下，您的测试将是

import AnimateNumber from './../src/components/AnimateNumber.vue';
import VueTestCase from "petrol/core/VueTestCase.js";

export default class AnimateNumberTest extends VueTestCase {

    /** @test */
    it_display_the_correct_number() {
        this.SUT = this.mount(AnimateNumber, {number: 2});

        this.assertEquals(2, this.SUT.displayNumber);

        this.SUT = this.mount(AnimateNumber, {number: 5});

        this.assertEquals(5, this.SUT.displayNumber);
    }
}