分析使用jest对vue项目进行单元测试

这篇文章主要为大家详细介绍了分析使用jest对vue项目进行单元测试，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

最近领导对前端提出了新的要求，要进行单元测试。之前使用vue做了一个快报名小程序的pc端页面，既然要做单元测试，就准备用这个项目了，之前有些react的经验，vue还是第一遭

vue-cli3.0单元测试方面更加完备，就先升级到了cli3.0，因为项目是用typescript写的，需要ts-jest,得到jest的配置如下

代码如下：

{
 "jest": {
  "moduleFileExtensions": [
   "js",
   "jsx",
   "json",
   "vue",
   "ts",
   "tsx"
  ],
  "transform": {
   "^.+\\.vue$": "vue-jest",
   ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
   "^.+\\.tsx?$": "ts-jest"
  },
  "moduleNameMapper": {
   "^@/(.*)$": "<rootDir>/src/$1"
  },
  "snapshotSerializers": [
   "jest-serializer-vue"
  ],
  "testMatch": [
   "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  "testURL": "http://localhost/"
 }
}

先从简单的开始，测试了一个正则字符串常量文件，完美，一点问题没有

然后开始测方案页面的Scheme.vue组件，这个地方主要就想测一个computed属性，将三种有代表性的情况写完测试案例，兴冲冲运行yarn test:unit Scheme.test.ts，结果还不错，三个it测试用例都通过了，但后面还有一片红是什么鬼

console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Invalid prop: type check failed for prop "headerPic". Expected String, got Object.

原来是这个地方调用了一个组件，这个组件需要一个headerPic属性，用作图片的src，看源码

代码如下：

<SideNav :header-pic="require('../../assets/scheme/schemeSideNavPic.jpg')">

感觉没毛病啊，去vue-devtool，"/img/schemeSideNavPic.f988623b.jpg"是字符串啊，一点毛病没有，应该不是require的问题啊，应该是require在jest里面的处理问题，再查看jest配置，已经对jpg等静态文件做处理了，看了一下jest-transform-stub模块的源码，很简单

代码如下：

module.exports = {
 process: function() {
  return ''
 }
}

既对这些静态文件返回空字符串，不做处理，这不就更不应该了呀,幸亏有vscode这款利器，可以方便调试源码，使用vscode调试没有报错，也没能让调试器进入vue文件，没办法，在ts文件里const pic = require('../../../assets/scheme/schemeSideNavPic.jpg')，再次调试，发现

【图片暂缺】

正是jest-transform-stub的内容，确实是个对象，跟在命令行内运行结果一致，也就是说只需要一直处理方式让其返回为

代码如下：

module.exports = ""

查看jest官网，搜了一下css，运气不错

本文来自：http://www.q1010.com/184/6384-0.html

注：关于分析使用jest对vue项目进行单元测试的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js