vue-test-utils怎么用-創(chuàng)新互聯(lián)

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

為子洲等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及子洲網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計、子洲網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

vue-test-utils官網(wǎng)：https://vue-test-utils.vuejs.org/zh/

jest官網(wǎng)：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。我們的環(huán)境現(xiàn)在都是babel7，通過npm安裝的babel-core默認(rèn)的還是6版本，所以要指定babel-core安裝的系列為7，否則會出現(xiàn)解析問題。

配置

jest配置：告訴jest它需要哪些額外的配置

jest相關(guān)的配置可以配置在package.json中或者單獨(dú)的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的默認(rèn)配置是["node_modules"]，表示所有的node_modules下的包都不需要babel解析。但是一些3rd庫提供的文件仍然是未編譯的es6語法，jest在解析時會報語法錯誤。因此需要指定白名單，需要那些node_modules下的包被babel轉(zhuǎn)換。

babel配置：告訴babel你需要用哪些工具去處理一坨（?香么？? ： ? ）代碼

推薦使用babel.config.js（babel需要轉(zhuǎn)換的node_modules同樣生效）而不是.babelrc（當(dāng)前項目生效）。

{
  ...,
 env: {
  test: {
   presets: [[
    '@babel/env',
    {
     modules: 'auto', // 現(xiàn)在不能通過webpack來解析s6 module，需要使用babel來解析，所以要開啟
     targets: {
      node: 'current' // 指定環(huán)境為當(dāng)前node版本，減少解析不識別語法的范圍
     }
    }
   ]],
   plugins: [[
    '@babel/plugin-transform-runtime', {
     corejs: 2,
     useESModules: false // 不允許使用es modules，babel需要通過@babel/plugin-transform-modules-commonjs將es module轉(zhuǎn)換為commonjs模塊解析
    }
   ]
  ]
 }
 }
}

??：通過babel的env.test指定jest測試時需要的babel配置（同webpack轉(zhuǎn)換解析時不同），jest會自動識別env.test的配置。

單測文件

理解：

單元測試不應(yīng)該追求代碼的覆蓋率；
單元測試主要是為了測試組件UI，數(shù)據(jù)驅(qū)動后UI的變化在可控范圍之內(nèi)；
測試組件應(yīng)以純組件為主（業(yè)務(wù)組件邏輯過于復(fù)雜或經(jīng)常變動，涉及到的引入文件過多，不便于測試所有的功能性），純組件作為項目的基礎(chǔ)組件功能性上基本不變化。

遇到的問題總結(jié)

1.異步生命周期

vue-test-utils提供了對異步請求方法的mock，文檔如下：https://vue-test-utils.vuejs.org/zh/guides/testing-async-components.html

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

// 假設(shè)在異步生命周期方法中，調(diào)用的函數(shù)是init，那我們就通過jest.fn()提供的方法進(jìn)行mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

// 在Jest提供的全局方法中，調(diào)用異步生命周期的方法，以保證每個斷言都是在生命周期之后
beforeEach(async () => {
 init.default.mockClear()
 await wrapper.vm.$mount() // 異步生命周期里會調(diào)用init方法
})

2.如果測試文件中包含require.context，請看這一條：

這時候沒有webpack怎么辦？當(dāng)然是用別人踩過坑的方法救急！

說實(shí)話，如果組件引用了這種東西，我覺得它不夠純潔，還是不要管它好了╮(￣⊿￣")╭，放它走吧。

但是為什么要解決這個問題呢？想到以后可能還要測試js文件，我們的標(biāo)準(zhǔn)也有可能是覆蓋代碼行數(shù)的測試，所以，還是解決一下吧。

其實(shí)思路很簡單，我們需要在全局重寫require.context，babel再遇到require.context就不會報錯了。

// 別怕，不需要你手動寫，有人已經(jīng)寫了個插件了：babel-plugin-require-context-hook
// 在babel.config.js的env.test中加上這個插件
...
plugins: [..., 'require-context-hook']
...

// 在jest.config.json中配置一下setupFiles 
// setupFiles表示在每個運(yùn)行文件前添加的額外配置
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

// 創(chuàng)建.jest/register-context.js文件，引入時進(jìn)行全局的注冊
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

3.測試過程總是報synax error ，諸如import無法解析這類es6語法引起的錯誤

小兄弟，只能說好好檢查一下你的babel是否配置正確，并且安裝了適合的babel-core版本。出現(xiàn)這個問題的時候，說明babel并沒有解析es6語法，順藤摸瓜，

（確保依賴包的安裝源相同，建議用yarn）

if 是node_modules里的文件導(dǎo)致的，通過配置transformIgnorePatterns告訴babel需要它解析的模塊；
else if 是項目的文件導(dǎo)致的，那就查看下自己的babel.config.js（確保不是.babelrc文件）是否配置正確，如果使用了@babel/preset-env，請注意module參數(shù)的配置；

以上是“vue-test-utils怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：vue-test-utils怎么用-創(chuàng)新互聯(lián)
當(dāng)前URL：http://www.muchs.cn/article16/coijgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、App設(shè)計、手機(jī)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容