我正在为组件中的vuelidate个验证编写单元测试.我发现$touch()方法是异步调用的,所以expect()需要使用$nextTick().当我需要两个nextTick()s换两个expect()s时,问题就出现了.

describe('Validations', () => {
    let data
    let myComponent
    beforeEach(() => {
        data = () => {
            propertyABC = 'not allowed value'
        }
        myComponent = localVue.component('dummy', {template: '<div></div>', validations, data})

    it('Properly validates propertyABC', (done) => {
        Vue.config.errorHandler = done
        let wrapper = mount(myComponent, {localVue})
        wrapper.vm.$v.$touch()

        wrapper.vm.$nextTick(() => {
            expect(wrapper.vm.$v.propertyABC.$error).to.be.true
            # fails, because propertyABC === 'allowed value', adn thus $error is false
            done()
        }

        wrapper.vm.propertyABC = 'allowed value'
        wrapper.vm.$v.propertyABC.$touch()

        wrapper.vm.$nextTick(() => {
            expect(wrapper.vm.$v.proprtyABC.$error).to.be.false
            done()
        }
    })
})

如何运行此测试而不将其拆分为两个单独的测试?我认为嵌套$nextTick()可能有效,但对于更大量的测试来说,这是不灵活的.

推荐答案

如果你能使用async functions,那么你就可以使用$nextTick个电话.这将避免嵌套它们,并将所有内容保持在相同的测试中.

就像这样:

describe('Validations', () => {
  let data;
  let myComponent;
  beforeEach(() => {
    data = () => ({ propertyABC = 'not allowed value' });
    myComponent = localVue.component('dummy', {template: '<div></div>', validations, data});
  });

  it('Properly validates propertyABC', async  () => {
    let wrapper = mount(myComponent, {localVue});
    wrapper.vm.$v.$touch();

    await wrapper.vm.$nextTick();

    expect(wrapper.vm.$v.propertyABC.$error).to.be.true;

    wrapper.vm.propertyABC = 'allowed value';
    wrapper.vm.$v.propertyABC.$touch();

    await wrapper.vm.$nextTick();

    expect(wrapper.vm.$v.proprtyABC.$error).to.be.false;
  })
})

Vue.js相关问答推荐

如何只提取一次用于无线电组过滤的数据,而不是针对数据库中的每个条目提取数据?

如何将模板传递给EJS菜单

v-slot: activator 中 {attrs} 参数的作用是什么?

在 Vuex Store 模块中使用 Vue.js 插件

用 axios 搜索:新字符时取消之前的请求

Vuejs中的条件a href

带有外部配置文件的 Vue js

如何获取 Vue 路由历史记录?

在 SPA VueJS 中全局声明 mapState 和 mapMutations

为什么 CSS 关键帧动画在具有范围样式的 Vue 组件中被 destruct ?

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

如何使用 vuejs 从 SPA 访问 /storage -laravel- 中的图像

如何使表格行可点击并展开行 - vue.js - element-ui

如何使用 vuex 删除项目?

vue 在 v-model 之后执行 @click

Vuetify Jest 未知自定义元素

Vuex 存储数据总是驻留在内存中?

简单的点击功能不触发

在 VueJS 中使用 Axios - 这个未定义

Vue.js 无法读取 null 的属性 length长度