详解使用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": {
   "^@/(.*)$": "/src/$1"
  },
  "snapshotSerializers": [
   "jest-serializer-vue"
  ],
  "testMatch": [
   "**/tests/unit*.spec.(js|jsx|ts|tsx)|**/__tests__
  return new Promise((resolve, reject) => {
   if (result.ResultCode === '200') {
    return result.Info
   } else {
    reject({ code: result.ResultCode, msg: result.Message, info: result.Info })
   }
  })
 }
}

MockAxios.__setMockData = (data: any) => {
 result = data
}

export default MockAxios

然后一马平川了，localVue.use(Vuex), localVue.use(AxiosPlugin)

const mockData = {
 ResultCode: '200',
 Msg: true,
 Info: {
  OpenId: 99,
  UserId: 92003,
 },
}
AxiosPlugin.__setMockData(mockData)
(wrapper.vm as any).login({ code: '29992' }).then(() => {
 expect(wrapper.vm.$store.state.userInfo.OpenId).toBe(mockData.Info.OpenId)
 expect(wrapper.vm.$store.state.userInfo.UserId).toBe(mockData.Info.UserId)
})

完美通过，vue的单元测试框架算是基本搭好了，也能给领导说说了

给领导看还得有个覆盖率报告

yarn test:unit --coverage

覆盖的文件比较少啊，不包含所有的源文件啊，需要加入collectCoverageFrom配置项，至此整个单元测试就比较完备了
下面是完整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": {
   "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
   "^@/(.*)$": "/src/$1"
  },
  "snapshotSerializers": [
   "jest-serializer-vue"
  ],
  "testMatch": [
   "**/tests/unit*.spec.(js|jsx|ts|tsx)|**/__tests__*.{vue,ts}",
   "!**/node_modules*.d.ts"
  ]
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。