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: 冰山一角==