Question

我有一个dest_table组件，其中有绑定到模板中两个输入字段的数据属性。我也定义了一个提交表单时调用的函数：

Category

我编写了以下测试来测试该组件的功能：

// Categories.vue ------

<template>
 ...
 ...
 ...
 <form action="/categories" method="post">
  <input type="text" class="input" name="name" v-model="form.name">
  <input type="text" class="input" name="category_code" v-model="form.categoryCode">
 </form>
</template>
 ..
 ..
  data() {
     return {
        categories:[],
        form: {
           name: null,
           categoryCode: null
        },
        serverResponseData: {}
     };
  },

该测试失败，原因是发现categoryCode的值为空，这是初始值。但是，如果我将断言移到moxios等待之外，就像这样：

it('calls an api on submitting the form', function (done) {
     const wrapper1 = mount(Categories);
     moxios.stubRequest('/categories', {
        status: 200,
        response: {
           success: true,
           data: {
              name: 'Meat',
              category_code: 'meat',
              id: 5
           }
        }
     });

     wrapper1.find('input[name="name"]').setValue('Meat');
     wrapper1.find('input[name="category_code"]').setValue('Meat');
     wrapper1.find('#createCategoryForm').trigger('submit.prevent');

     moxios.wait(() => {
        expect(wrapper1.vm.form.categoryCode).toBe('Meat');
        done();
     });
  });

测试通过。不确定为什么第一个变体失败。等到moxios等待结束时，绝对应该更新为期两天的数据绑定。实际上，我认为两种方式的数据绑定会立即更新。

任何解释/知识共享将不胜感激。

谢谢

对数据属性的vue-test-utils断言失败

0 个答案: