Vuejs testing - Ava - Changing propData

Question

Im trying to change the propData passed into a component to monitor and check the component.

Im expecting the last console log in this code block to be 5 but its still 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

I would use petrol to test vue js components https://github.com/MGMonge/petrol

in that case your test would be

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