使用 ESLint 服務自動偵測遺失的導入
您是否曾經執行您的 e2e 測試，卻在 10、15 或 30 分鐘後才發現有遺失/拼寫錯誤的導入，直到測試執行到一半才出現？當發生這種情況時，測試執行器會將這些測試報告為損壞。
eslint 是一個很棒的工具，可以在執行前捕獲不同的錯誤，此服務會在執行 WebdriverIO 測試之前執行 eslint 工具，作為自動步驟而不是手動步驟。
通常最好是更快地失敗，以便我們可以更快地解決問題，而不是稍後才解決。
建議的組態是使用未解析的執行器來檢查遺失的導入，但如果需要，您也可以設定服務使用 npm 或 yarn 執行器在您的專案中執行 eslinter，或傳遞一個標誌，告訴系統也使用您的 .eslintrc 組態。
安裝
安裝 wdio-eslinter-service
$ npm i wdio-eslinter-service --save-dev
快速開始 - 僅檢查遺失或未解析的導入
預設情況下，這個最小的組態「未解析」執行器會檢查未解析的 require 導入，如果找到未解析的導入，則會擲回錯誤。然後，該服務會停止執行。如果需要，您可以使用「npm」或「yarn」執行器自訂 .eslintrc.js 來執行更多檢查。請參閱eslint以取得更多詳細資訊。
如果您的專案中沒有 .eslintrc.js 組態，則可以將 wdio-eslinter-service 設定為使用預設的組態，該組態僅會在執行測試之前檢查遺失的導入。這很方便，因此您可以更快地發現不正確的導入，而不是稍後才發現。若要設定此功能，請將下列 eslinter 組態新增至您的服務陣列（假設您已在使用 chromedriver 服務；否則，請省略該部分）
wdio.conf.js
services: ['chromedriver', [
'eslinter',
{
runnerType: 'unresolved'
}
]],
此時，開始執行測試，如果存在遺失或不正確的導入，WebdriverIO 將記錄它並立即終止測試執行
$ npx wdio
選用 - 如果使用 module-alias
如果您使用 module-alias 模組，它可讓您設定別名來取代相對路徑，則您需要使用 eslint-import-resolver-custom-alias 外掛程式將其傳遞到 eslinter 組態中。以下是一個範例
services: ['chromedriver', [
'eslinter',
{
runnerType: 'unresolved',
eslintOverride: {
"settings": {
"import/resolver": {
"eslint-import-resolver-custom-alias": {
"alias": {
"@utils": "./utils",
"@specs": "./test-sync/specs",
"@pageobjects": "./test-sync/pageobjects",
"@": "./"
}
}
}
}
}
}
]],
在您的專案中安裝外掛程式
$ npm i eslint-import-resolver-custom-alias
執行測試並驗證系統是否會找到使用模組別名的不正確導入
$ npx wdio
實驗性 - 與專案中現有的 eslintrc 組態一起使用
若要讓 eslinter 服務也使用您專案中現有的 eslintrc 組態，請在 wdio.conf.js 組態服務陣列中將 includeProjectEslintrc 設定為 true。
我曾遇到外掛程式衝突的問題。如果您的專案 eslint 設定也在尋找未解析的導入，則這可能無法運作，並且可能需要調整您的 .eslintrc.js。目前不建議使用。
進階替代方案 - 使用 npm 和 yarn 執行器
npm 和 yarn 執行器可協助您額外控制在專案中執行現有 eslinter 設定。透過此組態，您可以在 package.json 中的 run-scripts 區段中定義要執行的額外命令
在您的 package.json 內，將此項目新增至您的執行指令碼
{
"scripts": {
"eslint": "eslint ."
}
}
注意：當使用 npm 或 yarn 執行器時，必須將 eslint 新增至 package.json，服務才能運作。
如果您尚未安裝和設定 eslint，您需要在您的專案中安裝和設定它，以及您使用的任何外掛程式，例如 eslint-plugin-import
$ npm i eslint eslint-plugin-import
如果您使用 eslint-import-resolver-custom-alias 外掛程式將模組別名對應到它們的實際路徑，則您也需要安裝它
$ npm i eslint-import-resolver-custom-alias
您也需要建立一個 .eslintrc.js 檔案，如果您的專案中還沒有 eslintrc 組態檔案。以下是一個基本設定，僅用於尋找未解析的導入，您可以展開此組態，在執行測試之前驗證其他程式碼品質檢查
// .eslintrc.js
module.exports = {
"parserOptions": {
"ecmaVersion": 2022
},
"plugins": [
"import"
],
"rules": {
"import/no-unresolved": [
2,
{
"commonjs": true,
"amd": false,
"caseSensitive": true
}
]
}
}
最後，將 eslinter 服務新增至 wdio.conf.js 中的服務陣列
services: ['eslinter']
執行 npm run eslint 以驗證並檢查錯誤。
如果您使用 yarn，您可以設定 runnerType 服務選項
services: [
['eslinter', { runnerType: 'yarn' }]
]
如果您已有想要重複使用的 linter 指令碼 (而不是 eslint)，您可以設定 scriptName 服務選項
services: [
['eslinter', { scriptName: 'eslint:check' }]
]
在 WebdriverIO 中使用
像平常一樣啟動 WebdriverIO 的測試執行器。eslint 將檢查程式碼。如果找到錯誤，則執行會立即停止。
$ npx wdio
範例
$ npx wdio --spec ./test/specs/example.e2e.js
Execution of 1 spec files started at 2021-05-15T12:04:05.388Z
2021-05-15T12:04:05.793Z WARN wdio-eslinter-service: initialize wdio-eslint-service using npm runner.
Deleted files and directories:
/Users/jem/Dev/wdio-example/allure-results
/Users/jem/Dev/wdio-example/test/specs/login.js
1:22 error Unable to resolve path to module '.../pageObjects/Auth.page' import/no-unresolved
✖ 1 problem (1 error, 0 warnings)
2021-05-15T12:04:08.581Z ERROR wdio-eslinter-service: SEVERE: Code contains eslint errors or eslint not installed.
