# 测试组件内的 Vuex -- state 和 getters
本页中描述的测试源码可以在 这里 找到。
# 使用 createLocalVue 测试 $store.state
在一个普通的 Vue 应用中，我们使用 Vue.use(Vuex) 来安装 Vuex 插件，并将一个新的 Vuex store 传入 app 中。如果我们也在一个单元测试中做同样的事，那么，所有单元测试都得接收那个 Vuex store，尽管测试中根本用不到它。vue-test-utils 提供了一个 createLocalVue 方法，用来为测试提供一个临时 Vue 实例。让我们看看如何使用它。首先，是一个基于 store 的 state 渲染出一个 username 的 <ComponentWithGetters> 组件。
<template>
<div>
<div class="username">
{{ username }}
</div>
</div>
</template>
<script>
export default {
name: "ComponentWithVuex",
data() {
return {
username: this.$store.state.username
}
}
}
</script>
我们可以使用 createLocalVue 创建一个临时的 Vue 实例，并用其安装 Vuex。而后我们将一个新的 store 传入组件的加载选项中。完整的测试看起来是这样的：
import Vuex from "vuex"
import { shallowMount, createLocalVue } from "@vue/test-utils"
import ComponentWithVuex from "@/components/ComponentWithVuex.vue"
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store({
state: {
username: "alice"
}
})
describe("ComponentWithVuex", () => {
it("renders a username using a real Vuex store", () => {
const wrapper = shallowMount(ComponentWithVuex, {
store,
localVue
})
expect(wrapper.find(".username").text()).toBe("alice")
})
})
测试通过。创建一个新的 localVue 实例引入了一些样板文件（boilerplate），并且测试也很长。如果你有好多使用了 Vuex store 的组件要测试，一个替代方法是使用 mocks 加载选项，用以简化 store 的 mock。
# 使用一个 mock 的 store
通过使用 mocks 加载选项，可以 mock 掉全局的 $store 对象。这意味着你不需要使用 createLocalVue，或创建一个新的 Vuex store 了。使用此项技术，以上测试可以重写成这样：
it("renders a username using a mock store", () => {
const wrapper = shallowMount(ComponentWithVuex, {
mocks: {
$store: {
state: { username: "alice" }
}
}
})
expect(wrapper.find(".username").text()).toBe("alice")
})
我个人更喜欢这种实现。所有必须的数据被声明在测试内部，同时它也更紧凑一点儿。当然两种技术都很有用，并没有哪种更好哪种更差之分。
# 测试 getters
使用上述技术，getters 同样易于测试。首先，是用于测试的组件：
<template>
<div class="fullname">
{{ fullname }}
</div>
</template>
<script>
export default {
name: "ComponentWithGetters",
computed: {
fullname() {
return this.$store.getters.fullname
}
}
}
</script>
我们想要断言组件正确地渲染了用户的 fullname。对于该测试，我们不关心 fullname 来自何方，组件渲染正常就行。
先看看用真实的 Vuex store 和 createLocalVue，测试看起来是这样的：
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store({
state: {
firstName: "Alice",
lastName: "Doe"
},
getters: {
fullname: (state) => state.firstName + " " + state.lastName
}
})
it("renders a username using a real Vuex getter", () => {
const wrapper = shallowMount(ComponentWithGetters, { store, localVue })
expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
})
测试很紧凑 -- 只有两行代码。不过也引入了很多设置代码 -- 我们基本上重建了 Vuex store。一个替代方法是引入有着真正 getters 的真实的 Vuex store。这将引入测试中的另一项依赖，当开发一个大系统时，Vuex store 可能由另一位程序员开发，也可能尚未实现。
让我看看使用 mocks 加载选项编写测试的情况：
it("renders a username using computed mounting options", () => {
const wrapper = shallowMount(ComponentWithGetters, {
mocks: {
$store: {
getters: {
fullname: "Alice Doe"
}
}
}
})
expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
})
现在全部所需的数据都包含在测试中了。太棒了！我特喜欢这个，因为测试是全包含的（fully contained），理解组件应该做什么所需的所有知识都都包含在测试中。
使用 computed 加载选项，我们甚至能让测试变得更简单。
# 用 computed 来模拟 getters
getters 通常被包裹在 computed 属性中。请记住，这个测试就是为了在给定 store 中的当前 state 时，确保组件行为的正确性。我们不测试 fullname 的实现或是要瞧瞧 getters 是否工作。这意味着我们可以简单地替换掉真实 store，或使用 computed 加载选项 mock 掉 store。测试可以重写为：
it("renders a username using computed mounting options", () => {
const wrapper = shallowMount(ComponentWithGetters, {
computed: {
fullname: () => "Alice Doe"
}
})
expect(wrapper.find(".fullname").text()).toBe("Alice Doe")
})
这比之前两个测试更简洁了，并且仍然表达了组件的意图。
# mapState 和 mapGetters 辅助选项
上述技术都能与 Vuex 的 mapState 和 mapGetters 辅助选项结合起来工作。我们可以将 ComponentWithGetters 更新为：
import { mapGetters } from "vuex"
export default {
name: "ComponentWithGetters",
computed: {
...mapGetters([
'fullname'
])
}
}
测试仍然通过。
# 总结
本文讨论了：
- 使用
createLocalVue和真实 Vuex store 测试$store.state和getters - 使用
mocks加载选项 mock 掉$store.state和getters - 使用
computed加载选项以设置 Vuex getter 的期望值
单独地测试 Vuex getters 实现的技术可以在 这篇向导 中找到。
本页中描述的测试源码可以在 这里 找到。