Question

我正在为更大的应用程序中的vuejs组件编写单元测试。我的应用程序状态全部在vuex存储中，因此几乎所有组件都从vuex中提取数据。

我找不到为此编写单元测试的工作示例。我找到了

单独测试组件时，可以使用store选项将模拟存储直接注入组件。

但我找不到如何测试这些组件的好例子。我尝试了很多方法。以下是我见过人们做的唯一方法。 stackoverflow question and answer

基本上它看起来像

test.vue：

 <template>
    <div>test<div>
 </template>
 <script>
 <script>
    export default {
        name: 'test',
        computed: {
            name(){
                return this.$store.state.test;
            }
        }
    }
  </script>

test.spec.js

import ...

const store = new Vuex.Store({
  state: {
    test: 3
  }
});
describe('test.vue', () => {

  it('should get test from store', () => {

    const parent = new Vue({
      template: '<div><test ref="test"></test></div>',
      components: { test },
      store: store
    }).$mount();

    expect(parent.$refs.test.name).toBe(3);
  });
}

注意＆＃34; ref＆＃34;这个例子在没有它的情况下不起作用。

这真的是正确的方法吗？它看起来很快就会变得凌乱，因为它需要将道具作为字符串添加到模板中。

Evan的引用似乎暗示商店可以直接添加到子组件（即不像示例那样的父组件）。

你是怎么做到的？

Answer 1

答案实际上非常简单，但目前没有记录。

  const propsData = { prop: { id: 1} };
  const store = new Vuex.Store({state, getters});

  const Constructor = Vue.extend(importedComponent);
  const component = new Constructor({ propsData, store });

注意商店传递给构造函数。 propsData目前是documented，“store”选项不是。{/ p>

此外，如果您使用的是Laravel，那么您可能正在运行的webpack版本存在一些奇怪的问题。

[vuex]必须调用Vue.use（Vuex），

使用laravel-elixir-webpack-official导致错误如果你做了修复：

npm install webpack@2.1.0-beta.22 --save-dev

这个https://github.com/JeffreyWay/laravel-elixir-webpack-official/issues/17

包含Vuex的测试似乎打破了

[vuex]必须调用Vue.use（Vuex）

即使你有Vue.use（Vuex）

在使用Vuex时如何测试Vuejs组件

1 个答案: