前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue单元测试-Jest

vue单元测试-Jest

作者头像
顾翔
发布2019-12-12 11:14:17
1.1K0
发布2019-12-12 11:14:17
举报
文章被收录于专栏:啄木鸟软件测试

顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript,

主文件是:zentao.py 。bugreport是禅道,script是python3+selenium 3,按照规则在禅道上书写的bugreport可由zentao.py程序生成py测试脚本。

来源:http://www.51testing.com

  vue接入单元测试Jest,配置花了点时间,相对于selenium+mocha+karma那套配置简单多了

  1.安装

  npm install --save-dev jest @vue/test-utils

  npm install --save-dev vue-jest

  npm install --save-dev babel-jest

  npm install --save-dev jest-serializer-vue

  2.配置babel

  babel配置可以写在package.json,也可以写在.babelrc文件,我的项目是写在.babelrc,并且是分环境,这里不能直接参考网上给出的~坑就在这里,翻阅了内外网资料,仔细看代码才写正确,并且由于报错:Unexpected Token Import for ES6 modules

  终于在https://github.com/facebook/jest/issues/2081%E4%B8%8A%E6%89%BE%E5%88%B0%E8%A7%A3%E6%B3%95,需要增加babel插件

代码语言:javascript
复制

   "test": {

  "presets": [

  ["env", {

  "targets": {

  "node": "current"

  },

  "modules": false

  }]

  ],

  "plugins": ["transform-es2015-modules-commonjs"]

  }

  至此,三套环境的配置如下,官网那个配置简单环境用用就行了,复杂环境还是要多试试:

  3.配置package.json,增加jest的配置

代码语言:javascript
复制

   "jest": {

  "moduleFileExtensions": [

  "js",

  "json",

  "vue"

  ],

  "moduleNameMapper": {

  "^src/(.*)$": "<rootDir>/src/$1"

  },

  "transform": {

  "^.+\\.js$": "<rootDir>/node_modules/babel-jest",

  ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"

  },

  "snapshotSerializers": [

  "<rootDir>/node_modules/jest-serializer-vue"

  ],

  "coverageDirectory": "<rootDir>/test/unit/coverage",

  "collectCoverageFrom": [

  "src/**/*.{js,vue}",

  "!src/index.js",

  "!src/router/index.js",

  "!**/node_modules/**"

  ]

  }

测试用例存放目录,自己可以写testRegex的正则匹配存放的测试用例,匹配错误的控制台会有提示:Your test suite must contain at least one test,看到这个提示就要检查测试用例的命名是否正确的

  官网默认存放目录如下

  5.运行 npm run test ,控制台执行结果如下

星云测试

http://www.teststars.cc

奇林软件

http://www.kylinpet.com

联合通测

http://www.quicktesting.net

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档