vue的自动化测试详解（三）-阿里云开发者社区

vue的自动化测试详解（三）

2022-12-27 149

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue的自动化测试详解

如何测试不通过就阻止代码git提交

安装husky：cnpm i husky --save

配置husky，在package.json

"husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }

当然这是文档的，我们要按我们所需的改成

"husky": {
    "hooks": {
      "pre-commit": "npm run test:unit"
    }
  }

代表再提交（commit）前先执行npm run test:unit

?‍?验证：

修改测试代码文件kaikeba.spec.js

由

it('测试新建完毕后，create生命周期后的数据',() => {//created
        let vm = new Vue(KaiKeBaComp).$mount()
        expect(vm.msg).toBe('aftermounted')
    })

改为

it('测试新建完毕后，create生命周期后的数据',() => {//created
        let vm = new Vue(KaiKeBaComp).$mount()
        expect(vm.msg).toBe('aftermounted1')
    })

这样测试肯定是不通过的

这时，我们来提交代码，add后再commit

那么我们再将测试文件改回来，让测试可以通过

如图：测试通过，代码也commit提交了

E2E测试

e2e针对应用，站在测试人员的角度，没有什么mount 加载，只有按钮页面，输入框，文本等

借⽤浏览器器的能力，站在⽤户测试⼈员的角度，输⼊框，点击按钮等，完全模拟用户，这个和具体的框架关系不大，完全模拟浏览器行为

?将views下的Home组件的

<HelloWorld msg="Welcome to Your Vue.js App"></HelloWorld>

代码恢复

?看看tests目录下e2e目录下的spec下的test.js，有这么一段

// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
})

这是测试代码，如果我们不做前面的恢复操作的话，测试肯定是不通过的

?执行npm run test:e2e，进行测试

项目会启动，并且会弹出一个有ok的弹窗，我们直接确定，还会有测试文件的js，选择对应的测试文件点进去

这样就已经测试通过了

?再来测试一个about页

// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
  it('Visits the app root url', () => {
    //访问根目录
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
  it('测试about页', () => {
    //访问about
    cy.visit('about')
    cy.contains('h1', 'This is an about page')
  })
})

结果是这个样子

后测的about，就最后打开了about页，也停留在了about页面

这些都是页面某个元素的文本的测试，那么我们再来个交互试试，在我们的KaiKeBa组件上有个点击事件，我们来试试

// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
  it('Visits the app root url', () => {
    //访问根目录
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
  it('测试about页', () => {
    //访问about
    cy.visit('about')
    cy.contains('h1', 'This is an about page')
  })
  it('KaiKeBa组件',() => {
    //访问根目录
    cy.visit('/')
    cy.contains('#msg','aftermounted')
    cy.get('button').click()//点击button元素
    cy.contains('#msg','click over')
  })
})