前端自动化测试jest教程10-vue实战

2,346 阅读3分钟

这是jest教程的最后一篇文章了,也算对自己所学知识的回顾吧!

vue项目实战git地址:github.com/foreverhot/…

在实际项目中运用jest所具备知识点

  1. jest (测试框架)

以上链接是对于各个知识点用法的个人总结,包括了大部分jest框架中的用法,当然也可以去查看jest的官方文档

  1. Vue Test Utils ( Vue.js官方的单元测试实用工具库)
  • 想要在vue中更方便的使用jest进行测试的话,vue官方很贴心的提供了一个test-utils,可以更方便的对vue中的组件,DOM等进行测试
  • 官网链接:vue-test-utils.vuejs.org/zh/
  1. vuejs
  • 想要在vue中使用jest,对于vue框架的熟练使用是必备的

在vue中使用jest

前提已经了解以上3点基础知识

这里做了一个demo,大致先了解一下demo所具有的功能

11.gif

这个demo涉及到的测试功能有:

  • DOM的测试
  • 异步代码测试
  • 定时器测试
  • vuex测试
  • 快照测试
  • 单元测试
  • 集成测试

克隆该项目,npm run test 即可查看该项目测试结果

下面我们开始分析项目demo

  1. 安装jest
    在通过vue-cli初始化项目的时候,选择单元测试和jest测试框架即可

  2. 项目结构

    1.png

  • 这里默认初始化完项目后,tests是一个单独的文件夹,如果将所有的测试文件都写在一个文件中,当你找一个测试文件时候比较麻烦。这里我将每个组件文件夹下都添加一个tests文件夹,这样项目结构使用起来更方便
  • 因为修改了测试文件的目录,因此需要重新在jest.config.js配置一下jest检查测试文件的查找路径(更多配置可以查看官网:jestjs.io/docs/en/con…)
    2.png
  • 脚手架默认是查找xx.spec.js测试文件,刚才修改路径的时候我们保留了默认配置
  1. 项目检查
    运行npm run test,即可对代码进行检查,这里添加了--watchAll,每次修改后会自动进行检查

    3.png

  2. 这里对项目中 异步代码测试vuex进行测试 分析一下,其他的都较好理解
    Home.vue中在进入页面的时候,会先去请求数据,将请求到的数据放入到vuex中,最后展示到页面

  • 在写测试用例的时候,不会去真的请求是数据,因此需要模拟数据,因此__mock__文件夹中就是模拟的数据
export default {
  // get请求,这里根据请求路径,模拟返回值
  get(url) {
    switch (url) {
      case '/ceshi':
        return new Promise(resolve => {
          resolve({
            data: ['测试1', '测试2', '测试3']
          })
        })
    
      default:
        break;
    }
  }
}
  • home.spec.js中,这里写的是集成测试
// 部分代码
it(`
    1. 用户进入界面请求数据
    2. 将数据存储在vuex中
    3. 页面展示数据
    4. 点击图片删除对应数据
  `, (done) => {
    // 这里组件中使用到了vuex,因此将store和localVue,传入组件中
      const wrapper = mount(Home, { store, localVue })
      // Home组件created中请求数据,这里使用$nextTick和done等待异步代码的完成后执行断言
      wrapper.vm.$nextTick(() => {
        let items = wrapper.findAll('[data-test="item"]')
        expect(items.length).toBe(3)

        items.at(0).trigger('click')
        items = wrapper.findAll('[data-test="item"]')
        expect(items.length).toBe(2)
        expect(items.at(0).text()).toBe('测试2')
        done()
      })
  })

vue项目实战git地址:github.com/foreverhot/…

本人能力有限,文章可能会有不正确或者不恰当的部分,希望你可以指出

关注公众号,和我一起学习前端必备技能,前端自动化测试jest