vue单元测试-Jest

发布时间:2019-05-26 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue单元测试-Jest脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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/j...,需要增加babel插件

@H_304_22@"test": {
            "PResets": [
              ["env", {
                   "targets": { 
                       "node": "current" 
                    },
                    "modules": false
                }]
            ],
            "plugins": ["transform-es2015-modules-commonjs"]
          }

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

vue单元测试-Jest

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

 "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/**"
    ]
  }
  1. 测试用例存放目录,自己可以写testRegex的正则匹配存放的测试用例,匹配错误的控制台会有提示:Your test suite must contain at least one test,看到这个提示就要检查测试用例的命名是否正确的

官网默认存放目录如下

vue单元测试-Jest

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

vue单元测试-Jest

参考:

Vue Test Utils

Jest

脚本宝典总结

以上是脚本宝典为你收集整理的vue单元测试-Jest全部内容,希望文章能够帮你解决vue单元测试-Jest所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。