一. Jest 是什么

由 Facebook 开发的一套用于前端 JavaScript 的测试框架。Jest 的一个理念是提供一套完整集成的“零配置”测试体验。

二. 配置

NPM 包

*Vue-Cli3.0 内置了 Babel7，关于需要 Babel 包的这边就不提及了。

  • jest - npm i ``babel-jest jest
  • babel-jest -npm i babel-jest babel-jest自动编译 JavaScript 代码
  • @vue/test-utils - npm i @vue/test-utils官方提供了 Vue 组件单元测试的方法
  • vue-jest - npm i ``vue-jest 变压器和源映射支持

VUE 单文件组件支持

  • “@vue/cli-plugin-unit-jest”: “^3.11.0”,
  • “@vue/test-utils”: “1.0.0-beta.29”,
  • “babel-core”: “7.0.0-bridge.0”,

babel.config.js

我们假设 webpack 使用了 babel-preset-env，这时默认的 Babel 配置会关闭 ES modules 的转译，因为 webpack 已经可以处理 ES modules 了。然而，我们还是需要为我们的测试而开启它，因为 Jest 的测试用例会直接运行在 Node 上。 同样的，我们可以告诉 babel-preset-env 面向我们使用的 Node 版本。这样做会跳过转译不必要的特性使得测试启动更快。 为了仅在测试时应用这些选项，可以把它们放到一个独立的 env.test 配置项中 (这会被 babel-jest自动获取)。

  1.   env: {
  2.     test: {
  3.       presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
  4.     }
  5.   }

jest.config.js

  1. module.exports = {
  2.   /** 是否为浏览器环境 */
  3.   browser: true,
  5.   /** 模块支持的后缀名 */
  6.   moduleFileExtensions: ['js', 'json', 'vue', 'jsx'],
  8.   /** 解析文件配置 */
  9.   transform: {
  10.     '^.+\\.js$': 'babel-jest',
  11.     '.*\\.(vue)$': 'vue-jest',
  12.     '^.+\\.vue$': 'vue-jest',
  13.     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  14.     '^.+\\.jsx?$': 'babel-jest'
  15.   },
  17.   /** 模块别名设置 */
  18.   moduleNameMapper: {
  19.     '^@/(.*)$': '<rootDir>/src/$1',
  20.     '\\.(css|less)$': 'identity-obj-proxy'
  21.   },
  23.   /** 测试文件匹配 */
  24.   testMatch: [
  25.     '**/__tests__/**/*.[jt]s?(x)',
  26.     '**/?(*.)+(spec).[tj]s?(x)',
  27.     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  28.   ],
  30.   /** 忽略文件 */
  31.   transformIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/', '/node_modules/'],
  33.   /** 是否开启测试覆盖率统计 */
  34.   collectCoverage: false,
  36.   /** 测试覆盖率数据来源 */
  37.   collectCoverageFrom: ['<rootDir>/src/utils/**/*.{js,vue}', '!**/node_modules/**'],
  39.   /** 测试覆盖率报告默认格式 */
  40.   coverageReporters: ['html', 'text-summary'],
  42.   /** 测试覆盖率生成报告目录 */
  43.   coverageDirectory: '<rootDir>/test/unit/coverage',
  45.   /** 文件忽略的配置 */
  46.   watchPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist', '<rootDir>/static'],
  48.   /** 层次显示测试套件中每个测试的结果 */
  49.   // bail: true
  50.   verbose: true,
  51.   /** 在遇到第一个失败后就停止继续运行测试用例 */ snapshotSerializers: ['jest-serializer-vue'],
  53.   testURL: 'http://localhost/',
  55.   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname']
  56. }

package.json “scripts”

  1.     "test": "jest",
  2.     "test:watch": "jest --watch",
  3.     "test:unit": "jest --coverage && npm run test:coverage",
  4.     "test:coverage": "open test/unit/coverage/index.html"

例子🌰

utils

  1. import customFunc from '@/utils/customFunc'
  3. /** 数组索引项互换方法 */
  4. describe('customFunc.js', () => {
  5.   test('数组指定索引项移动方法，源数组 [1, 2, 3, 4, 5] 将下标 0 的元素移动到下标 3，目标数组为 [2, 3, 4, 1, 5]', () => {
  6.     const arrayBefore = [1, 2, 3, 4, 5]
  7.     const arrayAfter = [2, 3, 4, 1, 5]
  8.     const fromIndex = 0
  9.     const toIndex = 3
  10.     expect(customFunc.moveItem(arrayBefore, fromIndex, toIndex)).toStrictEqual(arrayAfter)
  11.   })
  12. })

components

  1. import { createLocalVue, shallowMount } from '@vue/test-utils'
  2. import Vue from 'vue'
  3. import ElementUI from 'element-ui'
  4. import 'element-ui/lib/theme-chalk/index.css'
  5. import CommonBreadcrumb from '@/components/common/CommonBreadcrumb.vue'
  6. import { Breadcrumb, BreadcrumbItem } from 'element-ui'
  8. const localVue = createLocalVue()
  9. localVue.use(ElementUI)
  11. Vue.use(Breadcrumb)
  12. Vue.use(BreadcrumbItem)
  14. /** 挂载函数并返回已渲染的文本的工具函数 */
  15. function getRenderedText(propsData) {
  16.   const wrapper = shallowMount(CommonBreadcrumb, {
  17.     propsData: {
  18.       fileBreadcrumb: propsData
  19.     }
  20.   })
  21.   return wrapper.text()
  22. }
  24. function renderedTextIndexOfParams(args, renderedText) {
  25.   return args.filter(ele => renderedText.indexOf(ele) === -1).length === 0
  26. }
  28. test('评估通用面包屑组件渲染文案', () => {
  29.   // 默认文件夹
  30.   expect(
  31.     renderedTextIndexOfParams(
  32.       ['默认文件夹'],
  33.       getRenderedText([
  34.         {
  35.           pid: 0,
  36.           label: '默认文件夹'
  37.         }
  38.       ])
  39.     )
  40.   ).toBe(true)
  42.   // 默认文件夹/层级一
  43.   expect(
  44.     renderedTextIndexOfParams(
  45.       ['默认文件夹', '层级一'],
  46.       getRenderedText([
  47.         {
  48.           pid: 0,
  49.           label: '默认文件夹'
  50.         },
  51.         {
  52.           pid: 1,
  53.           label: '层级一'
  54.         }
  55.       ])
  56.     )
  57.   ).toBe(true)
  58. })

参考