복잡한 Vuex 저장소에 의존하고 다른 구성 요소를 확장하는 Vue.js 구성 요소를 유닛 테스트하려면 어떻게 해야 합니까?

복잡한 Vuex 저장소에 의존하고 다른 구성 요소를 확장하는 Vue.js 구성 요소를 유닛 테스트하려면 어떻게 해야 합니까?

복잡한 Vuex 스토어를 사용하고 다른 구성 요소를 확장하는 구성 요소를 유닛 테스트하는 방법이 궁금합니다.

다른 구성 요소를 확장하고 Vuex에 의존하는 구성 요소가 마운트되어 몇 가지 간단한 텍스트를 표시한다고 주장하는 테스트를 만드는 방법에 대한 예를 누가 제공할 수 있습니까?

사용해 보았습니다.vue-test-utils로.shallowMount테스트 중인 구성 요소이지만 구성 요소의 빌드 및 장착에 문제가 있기 때문에 테스트에 실패할 수 없습니다.이는 확장된 구성 요소를 활용한 구성 요소의 결과이며, 두 구성 요소 모두 복잡한 Vuex 저장소에 의존하기 때문입니다.

어떤 종류의 예든 감사하겠습니다.감사해요.

편집:

추가적인 상황을 위해, 우리 가게는 모듈로 나누어져 있습니다.저장소 정의 파일은 다음과 같습니다.

/* 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')
    })
})

유닛 테스트에 대한 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
        }
      }
    }
};

스토어를 가져오기 전에 배치할 수 있습니다.

다른 구성 요소를 확장하는 구성 요소는 다른 방식으로 테스트해서는 안 되며, 변수 및 요구 사항 측면에서 기본적으로 단일 구성 요소로 컴파일됩니다.해당 질문에 대해 자세히 설명해 주시면 답변해 드리겠습니다(예: 확장된 구성 요소에 고유한 문제 또는 오류가 발생한 경우).

저는 제가 언급한 어떤 것도 테스트하지 않았으므로 계속해서 오류가 발생하면 프로젝트를 함께 진행하겠습니다.행운을 빕니다.

언급URL : https://stackoverflow.com/questions/52373240/how-do-i-unit-test-a-vue-js-component-that-relies-on-a-complicated-vuex-store-an