Jest env. setup

官網文件：https://reurl.cc/rxznYb

install Jest & Vue Test Utils

yarn add jest @vue/test-utils -D

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

install vue-jest to handle *.vue file

yarn add vue-jest -D

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // 告诉 Jest 处理 `*.vue` 文件
      "vue"
    ],
    "transform": {
      // 用 `vue-jest` 处理 `*.vue` 文件
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

處理 webpack

@ 设置为 /src 的别名

{
  // ...
  "jest": {
    // ...
    // 支持源代码中相同的 `@` -> `src` 别名
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

Babel for Jest

yarn add babel-jest -D

// ...
  "jest": {
    // ...
    "transform": {
      // ...
      // 用 `babel-jest` 处理 js
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
    // ...
  }

備註：

• 只安裝 babel-jest 會遇到找不到 babel-core 的套件的問題，需要再安裝 babel-bridge 來解決
  yarn add babel-core@^7.0.0-bridge.0 -D

• 解決 eslint 無法辨別 describe, test...等等的問題

{
  "globals": {
    "jest": true,
    "expect": true,
    "mockFn": true,
    "config": true,
    "afterEach": true,
    "beforeEach": true,
    "describe": true,
    "it": true,
    "runs": true,
    "waitsFor": true,
    "pit": true,
    "require": true,
    "xdescribe": true,
    "xit": true
  }
}