Javascript 如何对依赖于复杂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);
    });
  }
);

编辑供您编辑

开玩笑的是，

窗口

被

全局

取代。因此，您可以通过以下方式模拟您的

phpvar

：

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

您将希望在导入商店之前放置它

扩展其他组件的组件不应进行任何不同的测试，它们基本上是根据变量和需求编译成单个组件。如果您可以进一步讨论这个问题，我很乐意回答（比如，您遇到的问题或错误是扩展组件特有的）

---

我还没有测试过我提到的任何东西，所以如果你仍然有错误，我将抛出一个项目。祝你好运

我可以看到它是如何工作的，但是我们定义了一个全局变量

phpvars

，我们在存储定义文件中使用它，当这个代码运行时，它抛出一个

变量not found

错误。在我的单元测试中，我试图在窗口对象上定义一个全局

phpvars

变量，但这似乎不起作用。请参阅更新的帖子。另外，您的示例并没有回答关于一个单元如何测试扩展了另一个Vue组件的Vue组件的问题。@MichaelVezzani对我的答案进行了编辑。希望能有帮助。谢谢你！我会试试看，看看进展如何。