”。
同样，你不需要判断 Vuex 状态是否更改了。要验证这个需要另外单独测试 Vuex store。
组件的职责只是执行 commit，因此我们只要测试这个动作就行。
首先重写
$auth.check 假数据让它返回
true （模拟登录用户）。然后监听 store 的
commit 方法，并断言点击按钮后被调用。
test("vuex called when auth user clicks button", () => {
const config = createConfig({
mocks: {
$auth: {
check: () => true
}
}
});
const spy = jest.spyOn(config.mocks.$store, "commit");
const wrapper = shallowMount(Item, config);
wrapper
.find("button")
.trigger("click");
expect(spy).toHaveBeenCalled();
}不要测试其他库的功能
Item 组件展示条目数据，特别是标题和图片。或许我们应该写一个测试来专门检查这些？比如：
test("renders correctly", () => {
const wrapper = shallowMount(Item, createConfig());
// Wrong
expect(wrapper.find("h2").text()).toBe(item.title);
}这又是一个不必要的测试，因为它只是测试了 Vue 从 Vuex 中提取数据并插入到模板的能力。Vue 这个库已经对该机制进行了测试，所以你应该依赖于它。
测试 3: 正确地渲染
但是等等，如果有人不小心将
title 重命名为
name ，然后忘记更新插值表达式怎么办？这难道不需要测试吗?没错，但是如果你像这样来测试模板的方方面面，何时才是个头？
测试 HTML 最好的办法是使用快照，用来检查整体渲染后的结果。这不仅覆盖了标题插值，还包括图片、按钮文本、任何 class 等。
test("renders correctly", () => {
const wrapper = shallowMount(Item, createConfig());
expect(wrapper).toMatchSnapshot();
});其他不需要测试的点还有这些：
src 属性是否绑定到 img 元素
添加到 Vuex store 中的数据是否跟插入的数据一致
计算属性是否返回了正确的数据
执行 router push 是否重定向到正确的页面
诸如此类。
总结
我认为上面三个简单的测试对这个组件来说足够了。
组件单元测试的一个好理念是先假设测试是不必要的，除非被证明是必要的。
你可以问自己以下问题：
这是业务逻辑的一部分吗？
这是直接测试组件的输入和输出吗？
这是测试自己的代码，还是第三方代码？
