Jest 簡單配置

與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,對代碼進行轉化。最後再運行轉化後的測試用例代碼。

嗯!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章