安裝 Jest、Enzyme

安裝指令

使用 jest + enzyme + enzyme-to-json

npm i --save-dev jest enzyme enzyme-adapter-react-16 enzyme-to-json

使用 typescript + jest + enzyme + enzyme-to-json + ts-jest

npm i --save-dev jest @types/jest
npm i --save-dev enzyme @types/enzyme
npm i --save-dev enzyme-adapter-react-16 @types/enzyme-adapter-react-16
npm i --save-dev ts-jest
npm i --save-dev enzyme-to-json

package.json 配置
- setupFiles
  - 在運行測試案例代碼之前，Jest 會先運行這裡的配置文檔來初始化指定的測試環境，可設定多組，而且它們將跑在 setupTestFrameworkScriptFile 之前
- moduleFileExtensions
  - 代表支持加載的文檔名
- transformIgnorePatterns
  - 用正則來匹配不用測試的文檔
- testRegex
  - 正則表示的測試文檔，測試文檔的格式為 xxx.test.js
- collectCoverage
  - 是否生成測試覆蓋報告，如果開啟，會增加測試的時間
- collectCoverageFrom
  - 是計算 coverage 的檔案範圍，前面加驚嘆號便是排除的規則
- moduleNameMapper
  - 代表需要被 Mock 的資源名稱
- transform
  - 是一組要如何在 Jest 環境中轉換檔案的設定
  - 例如: 我們想測試 TypeScript 的檔案，但 Jest 原生並不支援，就可在此設定 transformer 將之編譯成 JavaScript

"jest": {
  setupFiles: [
    './test/setup.js',
  ],
  moduleFileExtensions: [
    'js',
    'jsx',
  ],
  testPathIgnorePatterns: [
    '/node_modules/',
  ],
  testRegex: '.*\\.test\\.js$',
  collectCoverage: false,
  collectCoverageFrom: [
    'src/components/**/*.{js}',
  ],
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
  },
  transform: {
    "^.+\\.js$": "babel-jest"
  },
}

我的簡單配置 typescript + jest + enzyme

"jest": {
    "collectCoverageFrom": [
      "ts/**/*.{ts,tsx}",
      "!ts/index.tsx"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "transform": {
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
}

安裝 Jest、Enzyme

參考資料

Similar Posts