Question

我是VUE js的新手，我正在尝试安装vue组件进行单元测试。但是我在运行npm run test命令时遇到无法读取属性的错误。但是应用程序运行良好，只是开玩笑的测试失败了。下面的代码段供参考。有人可以指导我吗？谢谢!!!

我尝试添加dataprops属性，但是它不起作用。

FAIL  test/account-lookup.test.js
 accountlookup
   x checking the presence of submit button (16ms)

 ? accountlookup > checking the presence of submit button

   TypeError: Cannot read property 'accountNumber' of undefined

     368 |   @include media-breakpoint-up(xl) {
     369 |     margin-bottom: -1px;
   > 370 |     height: 60px;
         |                                                ^
     371 |     width: 46%;
     372 |     border: 1px solid;
     373 |     border-color: lightgrey;

     at Proxy.render (client/js/components/account-lookup-form.vue:370:1738)
     at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4
42:22)
     at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.
s:2786:21)
     at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
     at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
     at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
     at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.r

下面的代码段：

     import { mount } from "@vue/test-utils";
import accountlookup from "../client/js/components/account-lookup-form.vue";

describe('accountlookup',()=>{
    test('checking the presence of submit button', () => {
            const wrapper = mount(accountlookup, {
                propsData: {
                  accountNumber: 'baz'
                }
              });


});
});

下面是错误来自的实际vue文件

                  <number-input
                    id="account-number"
                    :value="$v.accountNumber.$model"
                    :has-errors="$v.accountNumber.$error && $v.accountNumber.required"
                    :v="$v.accountNumber"
                    name="account-number"
                    maxlength="10"
                    required
                    class="form-control"
                    @change="accountNumber = $event.trim()"
                    placeholder="Enter Account Number"
                  />
                  <div
                    v-if="submitFailed && !$v.accountNumber.required"
                    id="account-number-required-text"
                    class="help-text error-text"
                  >Field required</div>
                  <div
                    v-else-if="$v.accountNumber.$error && !$v.accountNumber.minLength || !$v.accountNumber.maxLength"
                    id="account-number-length-text"
                    :class="{ 'error-text': $v.accountNumber.$dirty && $v.accountNumber.$model }"
                    class="help-text"
                  >Enter Account Number</div>
                </b-form-group>
              </slot>
            </b-tab>

TypeError：无法读取未定义的属性“ accountNumber”

0 个答案: