51Testing软件测试论坛

标题: vue2项目，踩坑Jest单元测试 [打印本页]
作者: lsekfe    时间: 2022-4-15 09:16
标题: vue2项目，踩坑Jest单元测试
目前的项目已经维护了挺久，由于客户要求，我们要为项目加上单元测试，挑选一番后选择了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中配置。如果使用上面的命令，可以少配很多网上说的配置，比如下面标注了 不需要的。
  1. module.exports = {
  2. 　　    "moduleFileExtensions": [ //不需要配置
  3. 　　        "js",
  4. 　　        "json",
  5. 　　        // 告诉 Jest 处理 `*.vue` 文件
  6. 　　        "vue"
  7. 　　    ],
  8. 　　    testMatch: [ //test文件所在位置
  9. 　　        '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  10. 　　    ],
  11. 　　    "transform": {  //不需要配置
  12. 　　        // 用 `vue-jest` 处理 `*.vue` 文件
  13. 　　        ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  14. 　　        // 用 `babel-jest` 处理 js
  15. 　　        "^.+\\.js$": "babel-jest"
  16. 　　    },
  17. 　　    "moduleNameMapper": { //不需要配置
  18. 　　        "^@/(.*)$": "<rootDir>/src/$1"
  19. 　　    },
  20. 　　    "collectCoverage": true,  //是否创建报告
  21. 　　    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"], //创建报告的文件来源
  22. 　　    "coverageReporters": ["html", "text-summary"]  //报告的格式
  23. 　　    "coveragePathIgnorePatterns":"[]" //生成报告需要忽略的文件，默认值为 node_modules
  24. 　　    "globals":{ //配置全局变量，此处我配置了一个全局变量VUE_APP_DATA，也可以在setup file中配置，如下说的lodash
  25. 　　      "VUE_APP_DATA": {
  26. 　　         siteENV:'DEV'
  27. 　　       }
  28. 　　     }
  29. 　　    setupFiles:['<rootDir>/src/jest-setup.js'] //启动jest需要的文件
  30. 　　};
复制代码
3. 如果第一步没有自动生成tests文件夹，可以自己在项目目录下创建tests文件夹，再创建units文件夹，并添加example.spec.js文件，类似下面，具体原因可以看上面的配置项，testMatch，指定了test文件在这个目录下，这个可以自己配置。
  1. import { shallowMount } from '@vue/test-utils'
  2. 　　import HelloWorld from '@/components/HelloWorld'
  3. 　　describe('HelloWorld.vue', () => {
  4. 　　  it('renders props.msg when passed', () => {
  5. 　　    const msg = 'new message'
  6. 　　    const wrapper = shallowMount(HelloWorld, {
  7. 　　      propsData: { msg }
  8. 　　    })
  9. 　　    expect(wrapper.text()).toMatch(msg)
  10. 　　  })
  11. 　　})
复制代码
　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测试需要的启动文件，上面有配置。
  1. 　import _ from 'lodash';
  2. 　　if (typeof window !== 'undefined') {
  3. 　　  window._ = _;
  4. 　　  window.VUE_APP_DATA.resource ={'app':'cfcf'}
  5. 　　}
复制代码
3. canvas的api报错，比如CanvasRenderingContext2D，需要安装jest-canvas-mock，把他引入jest-setup.js文件中：
  1. 　    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
  1.    transformIgnorePatterns:["/node_modules/(?!(element-ui/src/mixins)/)"],
复制代码
　5.webpack指定 raw-loader!导入的文件，无法找到模块。
　　需要将路径映射添加到我的 jest 配置中，以便让我的测试识别我设置的路径映射。
  1.   "moduleNameMapper": {
  2. 　　      "!raw-loader!@/(.*)": "<rootDir>\\src/\\$1",
复制代码
　6. require.context is not a function 报错，需要添加新的依赖， babel-plugin-transform-require-context：
  1. 　.babelrc中增加
  2. 　　env:{
  3. 　　 test:{
  4. 　　  plugins:["transform-require-context"] //修复3个jest test报错
  5. 　　 }
  6. 　　}
复制代码
7. CDN引入的Element UI，Element组件提示没有注册，比如HelloWorld组件中使用到了 el-button组件，就会报错是否解决办法就是在jest-setup.js中创建lcoalVue，localVue使用Element组件，这个localVue需要被引入测试文件，测试组件的时候，使用这个localVue就可以了。
  1. import { shallowMount } from '@vue/test-utils'
  2. 　　import HelloWorld from '@/components/HelloWorld'
  3. 　　import {localVue} from '@/jest-setup'
  4. 　　describe('HelloWorld.vue', () => {
  5. 　　  it('renders component', () => {
  6. 　　    const wrapper = shallowMount(HelloWorld, {localVue})
  7. 　　    expect(wrapper.findAll('.hello-world').length).toBe(1)
  8. 　　  })
  9. 　　})
复制代码
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文件：
  1. 　import _ from 'lodash';
  2. 　　if (typeof window !== 'undefined') {
  3. 　　    window._ = _;
  4. 　　}
  5. 　　import 'jest-canvas-mock'; //修复2个报错
  6. 　　import { config,createLocalVue } from '@vue/test-utils';
  7. 　　import ElementUI from 'element-ui';
  8. 　　import language from '@/i18n/en';
  9. 　　import $store from '@/store';
  10. 　　config.mocks={ //给test-utils设置全局变量，适用于prototype定义的方法
  11. 　　    $t:(msg) => language[msg],
  12. 　　    $store:$store,
  13. 　　}
  14. 　　const testVue = createLocalVue();
  15. 　　testVue.use(ElementUI);
  16. 　　export const localVue = testVue;
复制代码










欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2