![](/img/trans.png)
[英]Vue.js Avoriaz unit test produces translation warnings when vue-i18n is used
[英]Test computed property in Vue.js using AVA with Avoriaz
我正在尝试使用AVA和Avoriaz测试Vue.js组件的计算属性。 我可以挂载该组件并访问数据属性。
当我尝试访问计算属性时,该函数似乎对该组件上的数据没有作用域。
computed: {
canAdd() {
return this.crew.firstName !== '' && this.crew.lastName !== '';
}
我得到的Error: Cannot read property 'firstName' of undefined
是Error: Cannot read property 'firstName' of undefined
测试文件:
import Vue from 'vue';
import { mount }
from 'avoriaz';
import test from 'ava';
import nextTick from 'p-immediate';
import ComputedPropTest from '../../../js/vue-components/computed_prop_test.vue';
Vue.config.productionTip = false;
test.only('Should handle computed properties', async(t) => {
const MOCK_PROPS_DATA = {
propsData: {
forwardTo: '/crew',
crew: {}
}
},
wrapper = mount(ComputedPropTest, MOCK_PROPS_DATA),
DATA = {
crew: {
firstName: 'Ryan',
lastName: 'Gill'
}
};
wrapper.setData(DATA);
await nextTick();
console.log('firstName: ', wrapper.data().crew.firstName); // Ryan
console.log('isTrue: ', wrapper.computed().isTrue()); // true
console.log('canAdd: ', wrapper.computed().canAdd()); // Errors
t.true(wrapper.computed().isTrue());
});
零件:
<template>
<div>
<label for="firstName" class="usa-color-text-primary">First Name
<i class="tooltipTextIcon fa fa-info-circle usa-color-text-gray" title="First name of crew."></i>
<span class="required usa-additional_text usa-color-text-secondary-dark">Required</span>
</label>
<input id="firstName" type="text" class="requiredInput" name="firstName" v-model="crew.firstName" autofocus>
<label for="lastName" class="usa-color-text-primary">Last Name
<i class="tooltipTextIcon fa fa-info-circle usa-color-text-gray" title="Last name of crew."></i>
<span class="required usa-additional_text usa-color-text-secondary-dark">Required</span>
</label>
<input id="lastName" type="text" class="requiredInput" name="lastName" v-model="crew.lastName" autofocus>
</div>
</template>
<script>
export default {
name: 'crew-inputs',
data() {
return {
crew: {
firstName: '',
lastName: ''
}
}
},
computed: {
canAdd() {
return this.crew.firstName !== '' && this.crew.lastName !== '';
},
isTrue() {
return true;
}
}
}
</script>
isTrue
计算属性似乎有效,但不依赖于组件中的任何数据。
长时间看和讨论后,它看起来像this
计算出的吸气剂的情况下被设置为意想不到的事情。 由于意外的结果是this
背景下, this
不再指Vue的实例,导致组件的属性是不可访问。
您正在通过运行时错误看到此情况
Error: Cannot read property 'firstName' of undefined
如果不深入研究Avoriaz和Vue的工作原理,我们将无法知道。 我确实尝试通过以下最小,完整和可验证的示例进行更深入的调查。 您或其他人可能想更深入地了解它。
'use-strict';
import Vue from 'vue';
import { mount } from 'avoriaz';
const FooBar = {
template: `
<div>{{ foobar }}</div>
`,
data() {
return {
foo: 'foo',
bar: 'bar',
};
},
computed: {
foobar() {
debugger;
return `${this.foo} ${this.bar}`;
},
},
};
const vueMountedCt = new Vue(FooBar).$mount();
const vueMountedVm = vueMountedCt;
const avoriazMountedCt = mount(FooBar);
const avoriazMountedVm = avoriazMountedCt.vm;
/**
* Control case, accessing component computed property in the usual way as documented by Vue.
*
* @see {@link https://vuejs.org/v2/guide/computed.html}
*
* Expectation from log: 'foobar' (the result of the computed property)
* Actual result from log: 'foobar'
*/
console.log(vueMountedVm.foobar);
/**
* Reproduce Avoriaz's method of accessing a Vue component's computed properties.
* Avoriaz returns the Vue instance's `$option.computed` when calling `wrapper.computed()`.
*
* @see {@link https://github.com/eddyerburgh/avoriaz/blob/9882f286e7476cd51fe069946fee23dcb2c4a3e3/src/Wrapper.js#L50}
*
* Expectation from log: 'foobar' (the result of the computed property)
* Actual result from log: 'undefined undefined'
*/
console.log(vueMountedVm.$options.computed.foobar());
/**
* Access Vue component computed property via Avoriaz's documented method.
*
* @see {@link https://eddyerburgh.gitbooks.io/avoriaz/content/api/mount/computed.html}
*
* Expectation from log: 'foobar' (the result of the computed property)
* Actual result from log: 'undefined undefined'
*/
console.log(avoriazMountedCt.computed().foobar());
一些观察:
this
上下文设置为Vue实例。 this
上下文。 至于为什么会这样-我不知道。 为了理解这一点,我认为我们需要知道为什么存在vm.$options.computed
,来自Vue核心团队的计划用例,以及是否预期我们会遇到的行为。
您可以通过以下方法解决此问题
wrapper.computed().canAdd.call(wrapper.vm);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.