Vue+Jest 单元测试

arron4210

已于 2023-06-16 10:00:57 修改

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 vue 文章标签：单元测试 vue

于 2021-06-10 15:43:04 首次发布

本文链接：https://blog.youkuaiyun.com/arron4210/article/details/117779592

这篇博客探讨了在Vue项目中使用Jest进行单元测试的常见场景，包括挂载组件、模拟函数、测试接口、watch、computed属性以及处理方法。文章提到了jest.fn()、jest.mock()和jest.spyOn()在不同情况下的应用，并提醒读者在测试中有条件显示的组件和触发按钮事件的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新到一个公司，要求单元测试覆盖率达50%以上，我们都是后补的单测，其实单测的意义是根据需求提前写好，驱动开发，代替手动测试。然鹅这只是理想。。。

这里总结一下各种遇到的单测场景

挂载组件，调用elementui, mock函数

```javascript

describe('页面验证', () => {
   
   
	const wrapper = getVue({
   
   
	    component: onlineFixedPrice,
	    callback(Vue) {
   
   
	      Vue.use(elementUi)
	    },
	    mocks: {
   
   
		  $route: {
   
   
	        query: {
   
   
	          id: '13945416091902200'
	        }
	      },
	      $store: {
   
   
	        state: {
   
   
	          name: 'meimei'
	        }
	      },
	      $refs: {
   
   
	        form: {
   
   
	          height: 300
	        }
	      },
	      $message: {
   
   
	        error() {
   
   
	          return jest.fn()
	        }
	      }
		}
	})
}

测试接口：
jest.fn(),jest.mock()和jest.spyOn()，都能创建mock函数，在实际项目的单元测试中：
1）jest.fn()常被用来进行某些有回调函数的测试；
2）jest.mock()可以mock整个模块中的方法，当某个模块已经被单元测试100%覆盖时，使用jest.mock()去mock该模块，节约测试时间和测试的冗余度是十分必要；
3）当需要测试某些必须被完整执行的方法时，常常需要使用jest.spyOn()。
这些都需要根据实际的业务代码灵活选择

```javascript

<!-- hello.js -->
<script>
methods: {
   
   
	sayHello() {
   
   
		this.$refs.form.validate(valid => {
   
   
			this.axios('getName', {
   
   id: '123'}, ()=> {
   
   
				this.name = res.data.name
			})
		})
	}
}
</script>


<!-- hello