vue2项目,踩坑Jest单元测试

发表于:2022-4-12 09:34

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:daisy,gogogo    来源:博客园

分享:
  目前的项目已经维护了挺久,由于客户要求,我们要为项目加上单元测试,挑选一番后选择了Jest(配置简便,开箱即用),下面记录了此次为项目添加Jest作为单元测试的经历。
  安装Jest
  1. 在项目目录下,执行命令vue add @vue/cli-plugin-unit-jest,这个命令会帮我们把相关的配置都配好,相关的依赖都装好,还会帮我们生成一个jest.config.js文件,网上说还会生成tests文件夹,我试的没有,另外还会帮你在eslintr.js文件下配置好jest需要的配置。
  一开始的时候,我在编辑器下的控制台输这个命令,提示错误,后来改到系统下的控制台才安装成功。
  用这个命令安装是最方便的,我尝试了几次按照网上说的先安装unit-jest,再安装test-util之类的,都不成功。

  2. 常用的一些jest配置项,在jest.config.js中配置。如果使用上面的命令,可以少配很多网上说的配置,比如下面标注了 不需要的。
  module.exports = {
      "moduleFileExtensions": [ //不需要配置
          "js",
          "json",
          // 告诉 Jest 处理 `*.vue` 文件
          "vue"
      ],
      testMatch: [ //test文件所在位置
          '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
      ],
      "transform": {  //不需要配置
          // 用 `vue-jest` 处理 `*.vue` 文件
          ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
          // 用 `babel-jest` 处理 js
          "^.+\\.js$": "babel-jest"
      },
      "moduleNameMapper": { //不需要配置
          "^@/(.*)$": "<rootDir>/src/$1"
      },
      "collectCoverage": true,  //是否创建报告
      "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"], //创建报告的文件来源
      "coverageReporters": ["html", "text-summary"]  //报告的格式
      "coveragePathIgnorePatterns":"[]" //生成报告需要忽略的文件,默认值为 node_modules
      "globals":{ //配置全局变量,此处我配置了一个全局变量VUE_APP_DATA,也可以在setup file中配置,如下说的lodash
        "VUE_APP_DATA": {
           siteENV:'DEV'
         }
       }
      setupFiles:['<rootDir>/src/jest-setup.js'] //启动jest需要的文件
  };

  3. 如果第一步没有自动生成tests文件夹,可以自己在项目目录下创建tests文件夹,再创建units文件夹,并添加example.spec.js文件,类似下面,具体原因可以看上面的配置项,testMatch,指定了test文件在这个目录下,这个可以自己配置。
  import { shallowMount } from '@vue/test-utils'
  import HelloWorld from '@/components/HelloWorld'
  describe('HelloWorld.vue', () => {
    it('renders props.msg when passed', () => {
      const msg = 'new message'
      const wrapper = shallowMount(HelloWorld, {
        propsData: { msg }
      })
      expect(wrapper.text()).toMatch(msg)
    })
  })

  4. 在package.json中添加启动命令,然后在控制台执行 npm run test:unit ,可以看到测试结果:
     "test:unit": "vue-cli-service test:unit"
   
  Jest 踩坑
  一开始的时候jes.config.js,其实没有配置这么多东西,有些配置是遇到问题后才加的,以下记录的是遇到的问题,以及解决办法。
   
  1.全局变量报错,可以配置globals(Object)属性。
  2.webpack没有打包进来的包,报错,比如lodash,是以cnd形式引入的,项目中直接用_., 像这种需要配置setupFiles,把lodash添加给window对象,在src下的jest-setup.js文件内加上如下代码,这个jest-setup.js就是jest测试需要的启动文件,上面有配置。
  import _ from 'lodash';
  if (typeof window !== 'undefined') {
    window._ = _;
    window.VUE_APP_DATA.resource ={'app':'cfcf'}
  }

  3. canvas的api报错,比如CanvasRenderingContext2D,需要安装jest-canvas-mock,把他引入jest-setup.js文件中:
      import 'jest-canvas-mock';  

  4.项目中引入第三方库报错,测试时Jest报错,export default portalCommunication; ^^^^^^ SyntaxError: Unexpected token export > 1
  报错原因是node_modules下的文件默认是不会被transform的(默认配置),所以es6的写法报错了。
  解决办法就是在transformIgnorePatterns中把需要transform的文件排除掉,如下代码,node_modules的文件夹都不会被transform,除了element-ui/src/mixins
     transformIgnorePatterns:["/node_modules/(?!(element-ui/src/mixins)/)"],

  5.webpack指定 raw-loader!导入的文件,无法找到模块。
  需要将路径映射添加到我的 jest 配置中,以便让我的测试识别我设置的路径映射。
    "moduleNameMapper": {
        "!raw-loader!@/(.*)": "<rootDir>\\src/\\$1",
   
  6. require.context is not a function 报错,需要添加新的依赖, babel-plugin-transform-require-context:
  .babelrc中增加
  env:{
   test:{
    plugins:["transform-require-context"] //修复3个jest test报错
   }
  }

  7. CDN引入的Element UI,Element组件提示没有注册,比如HelloWorld组件中使用到了 el-button组件,就会报错是否解决办法就是在jest-setup.js中创建lcoalVue,localVue使用Element组件,这个localVue需要被引入测试文件,测试组件的时候,使用这个localVue就可以了。
  import { shallowMount } from '@vue/test-utils'
  import HelloWorld from '@/components/HelloWorld'
  import {localVue} from '@/jest-setup'
  describe('HelloWorld.vue', () => {
    it('renders component', () => {
      const wrapper = shallowMount(HelloWorld, {localVue})
      expect(wrapper.findAll('.hello-world').length).toBe(1)
    })
  })
   
  8.vue i18n国际化报错:Vue warn]: Error in config.errorHandler: "TypeError: _vm.$t is not a function"
  解决办法就是,把某种国际化语言引入jest-setup.js,使用test-utils的mock api来mock全局对象。
   
  在这里贴一下jest-setup.js文件:
  import _ from 'lodash';
  if (typeof window !== 'undefined') {
      window._ = _;
  }
  import 'jest-canvas-mock'; //修复2个报错
  import { config,createLocalVue } from '@vue/test-utils';
  import ElementUI from 'element-ui';
  import language from '@/i18n/en';
  import $store from '@/store';
  config.mocks={ //给test-utils设置全局变量,适用于prototype定义的方法
      $t:(msg) => language[msg],
      $store:$store,
  }
  const testVue = createLocalVue();
  testVue.use(ElementUI);
  export const localVue = testVue;

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
价值398元的测试课程免费赠送,填问卷领取吧!

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计

法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号