单元测试 vue 组件，使用 vue-cli，不能测试父方法吗？

Question

我遇到了这个问题，我无法弄清楚，环顾四周似乎找不到有人问同样的问题......

所以，这是我的工作代码：

主.js：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
window.Vue = Vue
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
methods: {
greetings: function () {
return 'good morning'
}
},
render: h => h(App)
})

路由器/索引.js：

import Vue from 'vue'
import Router from 'vue-router'
import Configurations from '@/components/Configurations'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/configs',
name: 'Configurations',
component: Configurations
}
]
})

App.vue：

<template>
<router-view></router-view>
</template>
<script>
export default {
name: "App"
};
</script>

Configurations.vue：

<template>
<span>{{greetings}}</span>
</template>
<script>
export default {
name: "configurations",
data() {
return {
greetings: ""
};
},
created: function() {
this.greetings = this.$root.greetings();
}
};
</script>

当我运行它时，它会显示一个带有"早上好"字样的页面。没有别的。如您所见，问候消息是在主.js文件中定义的，因为在这种情况下，我希望在所有组件上显示一条消息，即：版权说明。因此，我将共同祖先上的消息设置为我的所有组件。

根据我的理解，要从"父"组件调用方法，您可以使用this.$root.yourMethod((来调用它。

现在，问题是，如果我希望对配置组件运行单元测试，我会收到一个错误，这让我相信我的设置方式，我无法测试 this.$root.greetings((，因为某些东西告诉我测试环境不知道组件之间的父子关系。

所以，当我运行时：

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

设置以下测试文件：

Configuration.spec.js：

import Configurations from '@/components/Configurations'
import Vue from 'vue'
describe('Configurations.vue', () => {
it('should display a greetings message', () => {
const Constructor = Vue.extend(Configurations)
const ConfigurationsComponent = new Constructor().$mount()
expect(ConfigurationsComponent.greetings).to.not.be.undefined;
})
})

我得到：

> 16 10 2018 09:28:35.184:INFO [karma]: Karma v1.7.1 server started at
> http://0.0.0.0:3000/ 16 10 2018 09:28:35.191:INFO [launcher]:
> Launching browser PhantomJS with unlimited concurrency 16 10 2018
> 09:28:35.204:INFO [launcher]: Starting browser PhantomJS 16 10 2018
> 09:28:40.977:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on
> socket WnDl-mQqmNZQOfyzAAAA with id 10303480 ERROR LOG: '[Vue warn]:
> Error in created hook: "TypeError:  is not a constructor (evaluating
> 'this.$root.greetings()')"

(后面跟着更多堆栈溢出不会让我发布的行，因为它们包含太多链接(

现在，如果我要改变

this.greetings = this.$root.greetings()

自：

this.greetings = "good morning";

在Configuration.vue文件中，然后再次运行测试命令，我会得到：

> 16 10 2018 09:48:43.174:INFO [karma]: Karma v1.7.1 server started at
> http://0.0.0.0:3000/ 16 10 2018 09:48:43.180:INFO [launcher]:
> Launching browser PhantomJS with unlimited concurrency 16 10 2018
> 09:48:43.555:INFO [launcher]: Starting browser PhantomJS 16 10 2018
> 09:48:49.228:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on
> socket o8BQ24wv1QX26SAZAAAA with id 53463701
> 
>   Configurations.vue
>     √ should display a greetings message
>
> PhantomJS 2.1.1 (Windows 8.0.0): Executed 1 of 1 SUCCESS (0.024 secs / 0.017 secs)
>
> TOTAL: 1 SUCCESS

(后跟一些其他不相关的信息(

那么，如何对包含对 this.$root 方法的调用的组件运行单元测试呢？

任何帮助，不胜感激。

• 卢卡斯

Answer 1

你(几乎(不应该从父组件调用某些东西。

您有两种可能性： 1. 使用 vuex 存储并将您的数据保存在那里。然后，每个需要的组件都可以通过商店获取器访问它。 2. 将所需的数据作为道具提供给子组件。

因为道具的事情变得非常混乱，建议使用商店。

如果你这样做，你的测试将变得更加清晰和更容易阅读。

使用模拟商店进行简单测试(只是为了展示事情可能如何(：

describe('MyComponent', () => {
let wrapper
beforeEach(() => {
const localVue = createLocalVue()
wrapper = mount(MyComponent, {
localVue,
mocks: {
$store: {
getters: {
'copyright': 'MyCopyright text'
}
}
}
})
})
it('should display copyright text', () => {
expect(wrapper.text('MyCopyright text')).toBe(true) 
})
})