vue-test-utils怎么用

小編給大家分享一下vue-test-utils怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue-test-utils官網：https://vue-test-utils.vuejs.org/zh/

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.org/zh/guides/testing-async-components.html

但是對于生命周期函數是異步的情況要怎么處理呢？以下是親測有效但是有點麻煩的姿勢：

// 假設在異步生命周期方法中，調用的函數是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參數的配置；

以上是“vue-test-utils怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！