Typescript VueJs TestUtil:在jest单元测试中,在挂载的钩子中修改数据时,html不是被动的
在对组件进行jest单元测试时,如果组件安装了钩子来更新数据,那么html将不再是被动的。挂载钩子修改前数据被卡住。Typescript VueJs TestUtil:在jest单元测试中,在挂载的钩子中修改数据时,html不是被动的,typescript,vue.js,jestjs,Typescript,Vue.js,Jestjs,在对组件进行jest单元测试时,如果组件安装了钩子来更新数据,那么html将不再是被动的。挂载钩子修改前数据被卡住。 testutil的版本是:1.0.0-beta.29 组件:count.ts 从“Vue属性装饰器”导入{Component,Vue}; @组成部分({ 模板:` 计数:{{count} 增量 `, }) 导出默认类计数扩展Vue{ 计数=0; 安装的(){ //评论如下,一切正常。 这个数=10; } 增量(){ 这个.count++; } } 测试规格:count.spec
testutil的版本是:1.0.0-beta.29 组件:count.ts
从“Vue属性装饰器”导入{Component,Vue};
@组成部分({
模板:`
计数:{{count}
增量
`,
})
导出默认类计数扩展Vue{
计数=0;
安装的(){
//评论如下,一切正常。
这个数=10;
}
增量(){
这个.count++;
}
}
测试规格:count.spec.ts
从'@vue/test-utils'导入{mount};
从“./Counter”导入计数器;
它('按钮点击应增加计数',()=>{
常数包装=安装(计数器);
const button=wrapper.find('button');
按钮。触发器('click');
log(`wrapper.vm.count=${wrapper.vm.count}`);
log(`html=${wrapper.html()}`);
});
如果我注释掉mounted()
中的行,一切正常。否则,输出将被删除
wrapper.vm.count=11
html=<div>
count:0
<button>Increment</button></div>
wrapper.vm.count=11
html=
计数:0
增量
html应该打印
count:11
而不是count:0
我认为您需要在数据部分定义count,而不是局部变量。在基于typescript类的组件中,我们可以将数据定义为普通类变量。