Vuejs单元测试 - 道具上的观察者

Question

我想单元测试Vue组件中道具上的观察者。我正在使用Karma + Jasmine。但是看起来道具的观察者似乎并没有在单元测试中被触发。

下面是一个简单的组件：

export default { 
    name: 'hello', 
    data: function() { 
     return { 
      b: null 
     }; 
    }, 
    props: { 
     a: { 
      type: String, 
      default: null 
     } 
    }, 
    watch: { 
     a(val) { 
      this.b = val; 
     } 
    }, 
    computed: { 
     c() { 
      return this.a + " computed"; 
     } 
    } 
} 

，这里是我的测试：

describe('Hello',() => { 
const HelloCtor = Vue.extend(Hello); 
let vm; 

beforeEach(() => { 
    vm = new HelloCtor({ 
     propsData: { 
      a: "hello" 
     } 
    }).$mount(); 
}); 

afterEach(() => { 
    vm.$destroy(); 
}); 

it('should watch a and compute c', (done) => { 
    vm.$nextTick(() => { 
     expect(vm.c).toBe("hello computed"); 
     expect(vm.b).toBe("hello"); 
     done(); 
    }); 
}); 
}); 

在断言， 'C' 是正确计算，但 'B' 总是空。如果我将“a”移到数据上，那么所有的工作都是完美的 请注意，当我在浏览器中手动测试我的应用程序时，道具上的观察者就像数据变量上的观察者一样被触发。

关于如何测试它的任何想法？

Answer 1

b始终为空，因为a在您开始观察其更改后未被修改。

当您开始观察变量时，观察者不会被触发，只有在其值发生变化时才触发。