vue.js - 测试 v-autocomplete 的观察者

Question

我有一个带有v-autocomplete 的 vue.js SearchTest 组件。它有 select 和 search 的观察者：

// SearchTest.vue

<template>
  <v-autocomplete
    v-model="select"
    :items="items"
    :loading="isLoading"
    :search-input.sync="search"
    hide-no-data
    hide-selected
    placeholder="Type search query"
    return-object
  ></v-autocomplete>
</template>

<script>
export default {
  data: () => ({
    select: null,
    isLoading: false,
    search: null,
    items: [],
  }),
  watch: {
    select(val) {
      console.log('select: ', val);
    }
    search(val) {
      console.log('search: ', val);
    },
  },
};
</script>

<style></style>

我正在测试它如下。我希望两个观察者都应该开火。事实上，只有select 观察者被解雇了。 search 观察者没有。

// SearchTest.spec.js

import { createLocalVue, mount } from '@vue/test-utils'
import SearchTest from '@/components/SearchTest.vue'

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

describe('SearchTest.vue', () => {
  const localVue = createLocalVue();
  const vuetify = new Vuetify({});
  let spy;
  beforeAll(() => {
    spy = jest.spyOn(console, 'log');
  })

  afterEach(() => {
    spy.mockClear();
  })

  it('Select', () => {
    const wrapper = mount(SearchTest, { localVue, vuetify });

    // Triggers select.
    wrapper.vm.select = 'select';
    wrapper.vm.$nextTick(() => {
      expect(spy).toBeCalled();  // OK
    });
  })

  it('Search', () => {
    const wrapper = mount(SearchTest, { localVue, vuetify });

    // Should trigger search, but fails.
    wrapper.vm.search = 'search';
    wrapper.vm.$nextTick(() => {
      expect(spy).toBeCalled();  // Fail
    });
  })
})

对通过Search 测试有什么想法吗？

Answer 1

我不知道到底发生了什么，但我发现v-autocomplete 在内部将搜索属性设置为null，如果没有选择任何项目（source）。它是通过使用this.$nextTick 来实现的，我认为在测试中设置搜索值时会出现问题。我找到了两种缓解这种情况的方法：

1

将search 的更改和断言嵌套到另一个$nextTick 似乎是诀窍。

it('Search', () => {
  const wrapper = mount(SearchTest, { localVue, vuetify });

  wrapper.vm.$nextTick(() => {
    wrapper.vm.search = 'search';
    wrapper.vm.$nextTick(() => {
      expect(spy).toBeCalled();
    });
  });
})

2

对于这个解决方案，我将wrapper 初始化并放入beforeEach。它的作用基本相同，但我猜组件的安装时间不同，所以它不会与v-autocomplete 的$nextTick 发生冲突。

describe('SearchTest.vue', () => {
  const localVue = createLocalVue();
  const vuetify = new Vuetify({});
  let spy;
  let wrapper;

  beforeEach(() => {
    wrapper = mount(SearchTest, { localVue, vuetify });
  })

  beforeAll(() => {
    spy = jest.spyOn(console, 'log');
  })

  afterEach(() => {
    spy.mockClear();
  })

  it('Select', () => {
    // Triggers select.
    wrapper.vm.select = 'select';
    wrapper.vm.$nextTick(() => {
      expect(spy).toBeCalled();  // OK
    });
  })

  it('Search', () => {
    // Should trigger search, but fails.
    wrapper.vm.search = 'search';
    wrapper.vm.$nextTick(() => {
      expect(spy).toBeCalled();  // Fail
    });
  })
})