使用Jest在vue项目中进行单元测试的尝试(三)

发表于:2022-1-06 09:10

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:茗远    来源:稀土掘金

分享:
  前端单元测试都能做什么呢
  1.在测试之前,我们先来了解两个东西,这个东西我们用的太多了,一定要分清楚,那么我们先来看一下,他们之间有什么区别。
  vue-test-utils?提供了两种方式用于渲染,或者说?加载(mount) ?一个组件 --?mount?和?shallowMount。一个组件无论使用这两种方法的哪个都会返回一个?wrapper,也就是一个包含了 Vue 组件的对象,辅以一些对测试有用的方法。那么?mount?和?shallowMount到底有什么不同呢,让我们来运行下面的代码进行尝试
  2.测试文件,我们要写道哪里呢?其实写道哪里都是可以的。test runner 会在项目test文件夹下索引xxx.spec.js来执行.
  我们不在test文件夹中创建测试文件会发生什么呢?下面是我们做出的操作,通过运行测试,我们可以看到,不在test文件夹中的测试文件,并没有得到执行。
  3.好了,讲了这么多,我们的第一个测试用例还没有编写,赶紧让我们行动起来把。
  我们现在views文件夹中创建一个test1.vue 并写上下面的内容。
  <template>
    <div>
      {{ greeting }}
    </div>
  </template>
  <script>
  export default {
    name: "Greeting",
    data() {
      return {
        greeting: "Vue and TDD"
      }
    }
  }
  </script>

  这样的一个vue文件我们可以测试什么呢?首先我们就可以确定这个div内渲染的东西是不是我们想要的。
  import { mount } from '@vue/test-utils'
  import Greeting from '@/views/test1.vue'
  describe('Greeting.vue', () => {
    it('renders a greeting', () => {
      const wrapper = mount(Greeting)
      expect(wrapper.text()).toMatch("Vue and TDD")
    })
  })

  我们先看一看这个测试文件都干了什么!
  第一步,他引入了@vue/test-utils为我们提供的mount方法来渲染组件,然后引入了对应我们要测试的test1.vue文件。
  执行describe方法,那么这个方法是什么东西呢?让我们打开Jest的官方文档来看一下。
  我靠,这个文档翻译的不是很好啊,英文不好的小伙伴怎么办啊。当然是一点点借助翻译工具了。
  describe(name, fn)?creates a block that groups together several related tests. For example, if you have a?myBeverage?object that is supposed to be delicious but not sour, you could test it with:
  翻译下就是创建将几个相关测试组合在一起的块。?例如,如果你有一个myBeverage对象,它应该是美味的,但不是酸的,你可以用以下方法来测试它,他有两个参数第一个是测试套件名称,第二个参数是一个函数。
  it 又是什么呢,这个东西就是创建一个测试用例,这里面有很多API,我们需要在vue-test-utils.vuejs.org/zh/这个网址来查看。
   expect(wrapper.text()).toMatch("Vue and TDD")

  我们来打印一下试试哦。
  我们修改test1.spec.js
  import { mount } from '@vue/test-utils'
  import Greeting from '@/views/test1.vue'
  describe('Greeting.vue', () => {
    it('renders a greeting', () => {
      const wrapper = mount(Greeting)
      console.log(wrapper.text())
      expect(wrapper.text()).toMatch('Vue and TDD')
    })
  })

  expect()这个方法又是什么东西。
  这个图有点问题安排,这应该反应成你很少会单独使用expect()
  toMatch()是什么意思呢?
  .toMatch(regexp | string)
  使用. tomatch检查字符串是否与正则表达式匹配。 
  例如,你可能不知道essayOnTheBestFlavor()到底返回什么,但你知道它是一个很长的字符串,子字符串葡萄柚应该在那里的某个地方。?你可以用以下方法来测试这个:
  describe('an essay on the best flavor', () => {
    test('mentions grapefruit', () => {
      expect(essayOnTheBestFlavor()).toMatch(/grapefruit/);
      expect(essayOnTheBestFlavor()).toMatch(new RegExp('grapefruit'));
    });
  });

  这个匹配器也接受一个字符串,它将尝试匹配:
  describe('grapefruits are healthy', () => {
      test('grapefruits are a fruit', () => {
      expect('grapefruits').toMatch('fruit');
      });
   });

  那么像.toMatch()这样的匹配器有多少呢?我们可以打卡Jest官网从jestjs.io/zh-Hans/doc…
  not()这个节点开始看。下面的都是匹配器。我后期会逐步翻译好,这个会很快,后面大家看这个就行,毕竟之前翻译过flutter的英文文档。
  单元测试范围
  ·一个方法
  · 一个简单操作
  为什么进行单元测试
  ·分模块开发,方便定位到哪个单元出了问题 (单元测试后进行代码合并)
  ·保证了代码质量
  ·驱动开发 (测试驱动开发,敏捷开发核心)
  function a(num1 + num2) {
      retrun num1 + num2
  }

  function a() {
      var num = b()
  }

  测试本身进行a方法本身,单元测试需要排除b方法(b方法本身是外部,应该屏蔽b方法),不进行测试。
  核心工作
  1.编写测试用例 写一个a方法,对于a方法的测试就是一个测试用例。
  2.测试套件  测试page1页面,包含了12方法。 包含12个测试用力, 12个方法组成一个测试套件  一个测试套件就是针对一个页面 就是一套测试用力的包装。
  测试流程
  1.import 对应组件  拿到的组件并不是真正的组件实力,而是这个组件的选项配置。
  2.测试一个组件测试的是方法和渲染结构,拿到的是mounted阶段的组件。
  3.利用@vue/test-util 把一个选项配置编程一个实力(依靠里面的方法,mount,shallMount)。
  4.二者区别 mount联通自组件一起渲染到mounted阶段  shallMount 不会渲染组件中的自组件。
  5.jest.spyOn() 因为Vue中的jest版本比较老。
  6.vue的渲染是异步的 nextTick  重新渲染完成,我们怎么通过单元测试进行渲染。
  7.什么是微任务,什么是宏任务  包裹在settimeout 中。
  8.vue单元测试中我们大量测试渲染结果的。

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
价值398元的测试课程免费赠送,填问卷领取吧!

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计

法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号