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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了岱山免費(fèi)建站歡迎大家使用！

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

jest官網(wǎng)：https://jestjs.io

依賴包

請(qǐng)安裝它們?

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，通過(guò)npm安裝的babel-core默認(rèn)的還是6版本，所以要指定babel-core安裝的系列為7，否則會(huì)出現(xiàn)解析問(wè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對(duì)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庫(kù)提供的文件仍然是未編譯的es6語(yǔ)法，jest在解析時(shí)會(huì)報(bào)語(yǔ)法錯(cuò)誤。因此需要指定白名單，需要那些node_modules下的包被babel轉(zhuǎn)換。

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

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

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

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

單測(cè)文件

理解：

• 單元測(cè)試不應(yīng)該追求代碼的覆蓋率；

• 單元測(cè)試主要是為了測(cè)試組件UI，數(shù)據(jù)驅(qū)動(dòng)后UI的變化在可控范圍之內(nèi)；

• 測(cè)試組件應(yīng)以純組件為主（業(yè)務(wù)組件邏輯過(guò)于復(fù)雜或經(jīng)常變動(dòng)，涉及到的引入文件過(guò)多，不便于測(cè)試所有的功能性），純組件作為項(xiàng)目的基礎(chǔ)組件功能性上基本不變化。

遇到的問(wèn)題總結(jié)

1.異步生命周期

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

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

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

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

2.如果測(cè)試文件中包含require.context，請(qǐng)看這一條 ：

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

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

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

其實(shí)思路很簡(jiǎn)單，我們需要在全局重寫require.context，babel再遇到require.context就不會(huì)報(bào)錯(cuò)了。

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

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

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

3.測(cè)試過(guò)程總是報(bào)synax error ，諸如import無(wú)法解析這類es6語(yǔ)法引起的錯(cuò)誤

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

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

• if 是node_modules里的文件導(dǎo)致的，通過(guò)配置transformIgnorePatterns告訴babel需要它解析的模塊；

• else if 是項(xiàng)目的文件導(dǎo)致的，那就查看下自己的babel.config.js（確保不是.babelrc文件）是否配置正確，如果使用了@babel/preset-env，請(qǐng)注意module參數(shù)的配置；

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

分享標(biāo)題：vue-test-utils怎么用
本文鏈接：http://www.rwnh.cn/article16/jdjidg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、域名注冊(cè)、定制網(wǎng)站、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

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