Question

我想知道如何对使用复杂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')
    })
})

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);
    });
  }
);

编辑进行修改

在玩笑中，window被global取代。因此，您可以使用以下方法来模拟phpvars：

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

在导入商店之前，您需要先放置它。

扩展其他组件的组件不应进行任何不同的测试，从变量和需求的角度来讲，它们实质上可以编译为单个组件。如果您可以扩展该问题，我很乐意回答（例如，扩展组件特有的问题或错误）。

我没有测试过我提到的任何内容，因此，如果您仍然遇到错误，我会把一个项目放在一起。祝你好运！

如何对依赖复杂Vuex存储并扩展另一个组件的Vue.js组件进行单元测试？

1 个答案: