Как протестировать наблюдателя Vue, который наблюдает за вычисляемым свойством из VueX?

От того, что вы пытаетесь достичь

При тестировании я хочу убедиться, что externalDependency.doThing () вызывается с помощью bar (который исходит из состояния vuex) следующим образом:

(и это действительно чистый подход к модульному тестированию), вы можете просто принудительно изменить этот наблюдатель, который в основном является функцией. Нет необходимости отслеживать, изменяется ли наблюдатель в случае изменения вычисленного значения или значения данных - позвольте Vue обработать это. Итак, чтобы изменить наблюдателя в смонтированном экземпляре Vue, просто назовите его как

wrapper.vm.$options.watch.bar.call(wrapper.vm)

Где bar - имя вашего наблюдателя. Таким образом, вы сможете протестировать именно ту функциональность, которую хотите протестировать.

Идея взята из этого комментария https://github.com/vuejs/vue-test-utils/issues/331#issuecomment-382037200, по проблеме vue-test-utils, упомянутой вами в вопросе.

Документация Vue Test Utils указывает на другой подход. где вы используете очень простой магазин Vuex:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'

// use a localVue to prevent vuex state from polluting the global Vue instance
const localVue = createLocalVue();
localVue.use(Vuex);

describe('Foo.vue', () => {
  let state;
  let store;

  beforeEach(() => {
    // create a new store for each test to prevent pollution
    state = { bar: 'bar' };
    store = new Vuex.Store({ state });
  })

  it('should call externalDependency.doThing with bar', () => 
  {
    shallowMount(MyComponent, { store, localVue });
    const spy = jest.spyOn(externalDependency, 'doThing');
    // trigger the watch
    state.bar = 'baz';
    expect(spy).toHaveBeenCalledWith('baz');
  });
})

Вам понадобится какой-то мутатор в экземпляре VueX, да, это вводит в тест еще один несвязанный модуль, но лично вашим тестом, включая использование Vuex, эта концепция уже нарушена.

Неожиданное изменение состояния более склонно к поведению, отличному от фактического использования.

Вы можете установить значение прямо в источнике, то есть VueX. так что у вас будет что-то вроде этого в вашем store.js:

const state = {
  bar: 'foo',
};
const mutations = {
  SET_BAR: (currentState, payload) => {
    currentState.bar = payload;
  },
};
const actions = {
  setBar: ({ commit }, payload) => {
    commit('SET_BAR', payload);
  },
};

export const mainStore = {
  state,
  mutations,
  actions,
};

export default new Vuex.Store(mainStore);

а затем в своем component.spec.js сделайте следующее:

import { mainStore } from '../store';
import Vuex from 'vuex';

//... describe, and other setup functions
it('should call externalDependency.doThing with bar', async () => {
  const localState = {
    bar: 'foo',
  };
  const localStore = new Vuex.Store({
      ...mainStore,
      state: localState,
  });
  const wrapper = mount(Foo, {
    store: localStore,
  });
  const spy = jest.spyOn(externalDependency, 'doThing');
  localStore.state.bar = 'baz';
  await wrapper.vm.$nextTick();
  expect(spy).toHaveBeenCalledWith('baz');
});

Вы также можете вызвать метод dispatch('setBar', 'baz') в магазине, чтобы мутация происходила правильно, вместо того, чтобы напрямую устанавливать состояние.

NB Важно повторно инициализировать свое состояние для каждого монтирования (т. е. либо сделать клон, либо повторно объявить его). В противном случае один тест может изменить состояние, и следующий тест начнется с этого грязного состояния, даже если оболочка была уничтожена.