與webpack 類似,當不做配置的時候,運行webpack 命令也可以進行打包,它會遵循webpack 默認的配置進行打包操作。
Jest 不做配置的時候,也是遵循它默認的配置進行打包。
那麼現在,我們自己來配置jest。
項目目錄下,使用命令
npx jest --init
意思是調用本項目下node_modules 下的jest
然後它會詢問我們幾個問題,根據需要選擇就好
之後就會在項目根目錄下,生成文件 jest.config.js 他就是jest 的配置文件。
而我們看看jest.config.js 就可以發現,現在開放的三項(是剛剛我們選擇的內容)
// Automatically clear mock calls and instances between every test
clearMocks: true,
// The directory where Jest should output its coverage files
coverageDirectory: "coverage",
// The test environment that will be used for testing
testEnvironment: "node",
我們先試一下coverage,它能給我們生成代碼覆蓋率報告。
命令行輸入命令
npx jest --coverage
並且,在項目跟目錄下,會生成目錄coverage,我們進入這個目錄下,再進入Icov-report,我們打開 index.html。就會有一個比較好看的代碼覆蓋率的報告。
我們可以去package.json 中配置一個script 命令,簡化代碼覆蓋率報告的生成命令,如下。
"scripts": {
"test": "jest",
"coverage": "jest --coverage"
},
當我們使用ES 規範的 導入導出時,使用剛剛的配置進行測試,就會報錯。因爲我們配置的環境是 node,它的語法是CommonJS。
如果是需要使用ES 風格的導入導出,那麼,我們使用babel 幫助我們將ES module 的代碼做一個轉化,將ES module 代碼轉化爲CommonJS 代碼。這樣就可以正常測試。
下面我們來在Jest 中結合 babel 來做這樣的轉化。
先安裝 babel 與 babel-preset
npm install @babel/[email protected] @babel/[email protected] --save-dev
然後,在項目裏配置一下babel , 新建 .babelrc 文件,並配置如下。
{
"presets": [
[
"@babel/preset-env", {
"targets": {
"node": "current"
}
}
]
]
}
再運行test 命令,就可以正常測試了。
實際上,之所以可以運行。底層的機制是,當我們安裝jest 時,jest 內部集成了一個插件 babel-jest。當運行jest 命令時,babel-jest 會檢測當前環境是否安裝了babel-core,如果安裝了話,會去取.babelrc 的配置。然後會在測試之前,會執行 babel,對代碼進行轉化。最後再運行轉化後的測試用例代碼。
嗯!