Vuejs 测试 - Ava - 更改 propData答案

【问题标题】：Vuejs testing - Ava - Changing propDataVuejs 测试 - Ava - 更改 propData
【发布时间】：2017-09-08 09:09:00
【问题描述】：

我正在尝试更改传递给组件的 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)
    });

});

【问题讨论】：

当您只在 vm2 上设置 5 时，为什么您期望 vm 中有 5 个？
因为 vm2.a 作为 prop 传入 vm。我要做的就是更改传递给组件的 propData 并确保组件内部数据已更改。
在某个地方有存储库吗？
很遗憾，不抱歉。但 AnimateNumber 是一个非常简单的组件，它真正做的只是更改一些数据，然后根据提供的 prop 'number' 进行渲染。我所要做的就是更改道具并通过我的测试进行检查。

标签： javascript vue.js vuejs2 ava

【解决方案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);
    }
}

【讨论】：

感谢您的建议，但我仍然想弄清楚为什么我所拥有的没有按预期工作。