Как выполнить модульное тестирование компонента Vue.js, который опирается на сложное хранилище Vuex и расширяет другой компонент?

Question

Мне интересно, как можно проводить модульное тестирование компонента, который использует сложное хранилище Vuex и расширяет другой компонент.

Может ли кто-нибудь предоставить мне пример того, как я мог бы создать тест, который просто утверждает, что компонент расширяет другой компонент и использует монтирование Vuex, и отображает какой-то простой текст?

Я пытался использовать от vue-test-utils до shallowMount тестируемого компонента, но я не могу заставить мой тест провалиться, потому что есть проблемы даже при сборке и монтировании компонента. Насколько я могу судить, это результат того, что компонент использует расширенный компонент, и потому что оба компонента полагаются на сложное хранилище Vuex.

Буду признателен за любые примеры. Спасибо.

EDIT:

Для дальнейшего контекста наш магазин разбит на модули. Вот как выглядит файл определения магазина:

/* global phpvars */

import Vue from 'vue'
import Vuex from 'vuex'

import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

import acloverrides from '../../modules/acloverrides'
import api from '../../modules/api'
import callback from '../../modules/callback'
import clearlink from '../../modules/clearlink'
import configuration from '../../modules/configuration'
import customer from '../../modules/customer'
import drKeepAlive from '../../modules/drkeepalive'
import interaction from './modules/interaction'
import ivr from './modules/ivr'
import marketing from '../../modules/marketing'
import opportunities from './modules/opportunities'
import order from '../../modules/order'
import orderNotes from './modules/notes'
import products from '../../modules/products'
import sidebar from './modules/sidebar'
import sparks from './modules/sparks'
import training from '../../modules/training'
import transformers from '../../modules/transformers'
import user from '../../modules/user'

let brand = require('../brands/' + phpvars.brand.name + '/modules/brand').default
let forms = require('../brands/' + phpvars.brand.name + '/modules/forms').default

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        acloverrides,
        api,
        brand,
        callback,
        clearlink,
        configuration,
        customer,
        drKeepAlive,
        forms,
        interaction,
        ivr,
        marketing,
        opportunities,
        order,
        orderNotes,
        products,
        sidebar,
        sparks,
        training,
        transformers,
        user
    },
    state: {
        availability: {
            status: false,
            results: {}
        },
        navigation: {
            enabled: phpvars.user.access.order.navigate,
            restrictTo: []
        },
        routes: [],
        router: {},
        editMode: false // Used to determine if the user has clicked the edit button on an existing order.
    },
    actions,
    getters,
    mutations
})

А вот мой файл тестового модуля:

import Vuex from 'vuex'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import SelectedProducts from '../../resources/assets/js/components/formfields/products/SelectedProducts'
import BaseField from '../../resources/assets/js/components/BaseField'
import store from '../../resources/assets/js/orderform/store/index.js'

const Vue = createLocalVue()
Vue.use(Vuex)

describe('SelectedProducts', () => {
    fit('sanity check', () => {
      window.phpvars = {
        brand: {
          name: 'foobar'
        },
        user: {
          access: {
            order: {
              navigate: true
            }
          }
        }
      }
      const wrapper = shallowMount(SelectedProducts, {
        store: new Vuex.Store(store)
      })
        expect(wrapper.text()).toContain('Selected Products')
    })
})

Answer 1

Я нахожу документацию Vue по модульному тестированию немного расплывчатой.Дайте этому шанс:

import {createLocalVue, shallowMount} from '@vue/test-utils';
import Vuex from 'vuex';
import store from 'path/to/store/index.js';
import Component from 'path/to/Component';

// create a local instance that uses
// the store, should follow a pattern present
// in your src/main.js
const localVue = createLocalVue();
localVue.use(Vuex);

describe(
  'Component', () => {
    test('renders', () => {
      const wrapper = shallowMount(Component, {
        store: new Vuex.Store(store)
      });
      expect(wrapper.isVueInstance()).toStrictEqual(true);
    });
  }
);

РЕДАКТИРОВАТЬ для редактирования

В Jest window заменено на global.Таким образом, вы могли бы высмеять ваш phpvars с помощью:

global.phpvars = {
    brand: {
      name: 'foobar'
    },
    user: {
      access: {
        order: {
          navigate: true
        }
      }
    }
};

Вы захотите разместить его перед импортом вашего магазина.

Компоненты, расширяющие другие компоненты, не должны тестироваться иначепо сути, они сводятся к одному компоненту с точки зрения переменных и требований.Если бы вы могли подробно остановиться на этом вопросе, я был бы рад ответить (например, на какие проблемы или ошибки, с которыми вы сталкиваетесь, характерные только для ваших расширенных компонентов).

Я не проверял ничего, что упомянул, так что еслиВы продолжаете иметь ошибки, я брошу вместе проект.Удачи!