前端單元測試jest入門

2021-10-14 18:39:55 字數 1217 閱讀 2616

安裝jest及命令執行

npm

install -g jest # 安裝

jest # 在專案根目錄下執行jest命令, 或者jest 執行單個檔案的單元測試

jest --coverage # 執行單元測試並計算測試覆蓋率

基礎入門

高階入門

相容es6(es2015)

a. 根目錄下建立檔案: 「babel.config.js」

b. 新增如下配置

module.exports =}]

,['@babel/preset-react']]

, plugins:

['@babel/plugin-syntax-jsx'

,'@babel/plugin-transform-modules-commonjs']}

;// 2. 需要安裝上面出現的所有模組

npm install @babel/preset-env @babel/preset-react @babel/plugin-syntax-jsx @babel/plugin-transform-modules-commonjs

相容jsx

引入babel的plugin模組

相容css

// package.json中的配置

"jest":}

,// 2. 安裝identity-obj-proxy模組

npm install identity-obj-proxy

模擬頁面事件

demo
import attendance from

'../attendance/attendance'

import react from

'react'

;import

"@testing-library/jest-dom/extend-expect"

;import

from

'@testing-library/react'

;jest.

mock

('react-router-dom',(

)=>}}

})test

('attendance test',(

)=>

);

前端單元測試框架jest總結

1 jest 環境搭建 檢視是否安裝成功 cmd進入 front end testing demo example目錄下輸入命令 npm install安裝所需要的依賴包 只有第一次需要安裝依賴包 安裝完成後,輸入npm test執行用例 選擇a執行所有的用例 輸入p是選擇執行哪個檔案的用例 2 j...

jest單元測試實踐總結及react單元測試

jest 是facebook推出的一款測試框架,整合了 mocha,chai,jsdom,sinon等功能。和 mocha 和 chai 的功能很像,甚至可以相容部分 mocha 和 chai 的語法。可以這麼寫 import react from react import from enzyme ...

在VS Code中除錯Jest單元測試

隨著react的流行,jest也成很多專案廣泛使用的測試框架。由於jest預設是併發執行測試,在日常的工作中發現很多同學對於如何除錯jest單元測試犯難。這些小細節有時真是 會者不難,難者不會 這裡給大家介紹如何在code中除錯jest測試的小技巧。注意 這裡需要node v8.4.之前的版本v8有...