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 是否重定向到正确的页面
诸如此类。
总结
我认为上面三个简单的测试对这个组件来说足够了。
组件单元测试的一个好理念是先假设测试是不必要的，除非被证明是必要的。
你可以问自己以下问题：
这是业务逻辑的一部分吗？
这是直接测试组件的输入和输出吗？
这是测试自己的代码，还是第三方代码？
让我们愉快地单元测试吧！希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: