当前位置：网站首页>单元测试

单元测试

2022-08-09 21:17:00 【51CTO】

单元测试是什么

单元测试是一种软件测试，其测试软件的各个单元或组件。目的是验证软件代码每个单元是否按照预期执行。单元测试由开发人员在应用程序的开发（编码阶段）中完成。单元测试隔离一段代码并验证其正确性。一个单元可能是单个功能，方法，过程，模块或对象。

为什么做单元测试

在开发阶段，单元测试可以帮助更早发现并修复BUG，并节省成本
它有助于开发人员了解代码库，并使他们能够快速做出修改
好的单元测试相当于项目文档
单元测试有助于代码重用，将我们的代码和测试都迁移到新项目。调整代码，直到测试再次运行。

单元测试的好处

通过单元测试，开发者可以了解到提供了什么功能，对单元测试API有基本了解
单元测试允许程序员在以后重构代码，并确保模块仍然正常工作（即回归测试）。该过程是针对所有功能和方法编写测试用例，以便每当更改导致故障时，都可以快速识别并修复该故障。
由于单元测试的模块化性质，我们可以测试项目的各个部分，而无需等待其他部分完成。

单元测试的坏处

单元测试不能够捕获程序中每个错误。即使在最简单的程序中，也不可能评估每种单元测试执行的路径。
单元测试的本质是将重点放在代码的单元上。因此，它不能捕获集成测试的错误和更广泛的系统层面的错误。

推荐：单元测试和其他测试手段一起使用

VUE项目中使用单元测试

我们使用 Vue-Test-Utils这个Vue.js官方的单元测试实用工具库，来编写VUE应用中的单元测试。

安装

这里，我们默认已经通过VUE的脚手架生成了项目，那么我们集成unit-jest插件就可以了。

       
       vue add @vue/unit-jest
      
1.

编写简单测试用例

单元测试的文件：

       
       // tests/unit/example.spec.js
       
       import { 
       
       shallowMount } 
       
       from 
       
       '@vue/test-utils'
       
       import 
       
       HelloWorld 
       
       from 
       
       '@/components/HelloWorld.vue'
       
       describe(
       
       'HelloWorld.vue', () 
       
       => {
       
       it(
       
       'renders props.msg when passed', () 
       
       => {
       
       const 
       
       msg 
       
       = 
       
       'new message'
       
       const 
       
       wrapper 
       
       = 
       
       shallowMount(
       
       HelloWorld, {
       
       propsData: { 
       
       msg }
       
    })
       
       expect(
       
       wrapper.
       
       text()).
       
       toMatch(
       
       msg)
       
  })
       
})
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

单元测试的组件：

       
       <!--scr/components/HellowWorld.vue-->
       
<template>
       
  <div class="hello-world">msg is :{{msg}}</div>
       
</template>
       
<script>
       
export default {
       
  name: 'hello-world',
       
  data() {
       
    return {}
       
  },
       
  props: {
       
    msg: {
       
      type: String,
       
      default: 'this is props msg'
       
    }
       
  }
       
}
       
</script>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

此时，执行下面的命令行即可：