vue-test-utils初使用

vue-test-utils官网： https://vue-test-utils.vuejs....

jest官网：https://jestjs.io

依赖包

请安装它们👇

yarn add @vue/test-utils vue-jest
yarn jestjest-serializer-vue
yarn add babel-jest babel-core@^7.0.0-bridge.0

⚠️：vue-jest依赖与babel-core。咱们的环境如今都是babel7，经过npm安装的babel-core默认的仍是6版本，因此要指定babel-core安装的系列为7，不然会出现解析问题。

配置

jest配置：告诉jest它须要哪些额外的配置

jest相关的配置能够配置在package.json中或者单独的jest.config.json文件中：

// jest.config.json
{        
    "moduleFileExtensions": [
        "js",
        "json",
        "vue"
    ],
    "transform": {
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest", //  jest使用babel解析js
        ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" // jest对vue单文件的解析
    },
    "snapshotSerializers": [
        "<rootDir>/node_modules/jest-serializer-vue"
      ],
    "moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/src/$1", //为了解析webpack配置的alias字段
        "^tim-architect/(.*)$": "<rootDir>/tim-architect/$1"
    },
    "transformIgnorePatterns": [
        "node_modules/(?!(yourModuleName))"
    ]
}

⚠️：transformIgnorePatterns的默认配置是["node_modules"]，表示全部的node_modules下的包都不须要babel解析。可是一些3rd库提供的文件仍然是未编译的es6语法，jest在解析时会报语法错误。所以须要指定白名单，须要那些node_modules下的包被babel转换。

babel配置：告诉babel你须要用哪些工具去处理一坨（💩香么 ？💩 ： 💩 ）代码

推荐使用babel.config.js（babel须要转换的node_modules一样生效）而不是.babelrc（当前项目生效）。

{
    ...,
  env: {
    test: {
      presets: [[
        '@babel/env',
        {
          modules: 'auto', // 如今不能经过webpack来解析s6 module，须要使用babel来解析，因此要开启
          targets: {
            node: 'current' // 指定环境为当前node版本，减小解析不识别语法的范围
          }
        }
      ]],
      plugins: [[
        '@babel/plugin-transform-runtime', {
          corejs: 2,
          useESModules: false // 不容许使用es modules，babel须要经过@babel/plugin-transform-modules-commonjs将es module转换为commonjs模块解析
        }
      ]
    ]
  }
  }
}

⚠️：经过babel的env.test指定jest测试时须要的babel配置（同webpack转换解析时不一样），jest会自动识别env.test的配置。

单测文件

理解：

• 单元测试不该该追求代码的覆盖率；
• 单元测试主要是为了测试组件UI，数据驱动后UI的变化在可控范围以内；
• 测试组件应以纯组件为主（业务组件逻辑过于复杂或常常变更，涉及到的引入文件过多，不便于测试全部的功能性），纯组件做为项目的基础组件功能性上基本不变化。

遇到的问题总结（待更新。。。） (ಥ_ಥ)

1.异步生命周期

vue-test-utils提供了对异步请求方法的mock，文档以下：https://vue-test-utils.vuejs....

可是对于生命周期函数是异步的状况要怎么处理呢？如下是亲测有效可是有点麻烦的姿式：

// 假设在异步生命周期方法中，调用的函数是init，那咱们就经过jest.fn()提供的方法进行mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

// 在Jest提供的全局方法中，调用异步生命周期的方法，以保证每一个断言都是在生命周期以后
beforeEach(async () => {
  init.default.mockClear()
  await wrapper.vm.$mount() // 异步生命周期里会调用init方法
})

2.若是测试文件中包含require.context，请看这一条 ：

这时候没有webpack怎么办？固然是用别人踩过坑的方法救急！

说实话，若是组件引用了这种东西，我以为它不够纯洁，仍是不要管它好了╮(￣⊿￣")╭，放它走吧。

可是为何要解决这个问题呢？想到之后可能还要测试js文件，咱们的标准也有多是覆盖代码行数的测试，因此，仍是解决一下吧。

其实思路很简单，咱们须要在全局重写require.context，babel再遇到require.context就不会报错了。

// 别怕，不须要你手动写，有人已经写了个插件了：babel-plugin-require-context-hook
// 在babel.config.js的env.test中加上这个插件
...
plugins: [..., 'require-context-hook']
...

// 在jest.config.json中配置一下setupFiles 
// setupFiles表示在每一个运行文件前添加的额外配置
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

// 建立.jest/register-context.js文件，引入时进行全局的注册
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

3.测试过程老是报synax error ，诸如import没法解析这类es6语法引发的错误

小兄弟，只能说好好检查一下你的babel是否配置正确，而且安装了适合的babel-core版本。出现这个问题的时候，说明babel并无解析es6语法，顺藤摸瓜，

（确保依赖包的安装源相同，建议用yarn）

• if 是node_modules里的文件致使的，经过配置transformIgnorePatterns告诉babel须要它解析的模块；
• else if 是项目的文件致使的，那就查看下本身的babel.config.js（确保不是.babelrc文件）是否配置正确，若是使用了@babel/preset-env，请注意module参数的配置；

。。。

==mark: 冰山一角==