メインコンテンツへスキップ

Eslintサービスを使用したインポートの欠落自動検出

wdio-eslinter-serviceはサードパーティパッケージです。詳細については、GitHub | npm を参照してください。

エンドツーエンドテストを実行して、10分、15分、または30分後にインポートの欠落や誤記を発見した経験はありませんか？このような場合、テストランナーはこれらのテストを失敗として報告します。

Eslintは実行前にさまざまなエラーを検出するための優れたツールであり、このサービスはWebdriverIOテストを実行する前に、手動ではなく自動化されたステップとしてEslintツールを実行します。

問題をできるだけ早く解決するために、できるだけ早く失敗させる方が多くの場合、効果的です。

推奨される設定は、未解決のインポートのみをチェックするunresolvedランナーを使用することですが、必要に応じて、npmまたはyarnランナーを使用してプロジェクトでeslinterを実行するようにサービスを設定したり、システムに.eslintrc設定を使用するように指示するフラグを渡すこともできます。

インストール​

wdio-eslinter-serviceをインストールします。

$ npm i wdio-eslinter-service --save-dev

クイックスタート - 未解決のインポートのみをチェック​

デフォルトでは、この最小限の設定（「unresolved」ランナー）は未解決のrequireインポートをチェックし、未解決のインポートが見つかった場合はエラーをスローします。その後、サービスは実行を停止します。必要に応じて、「npm」または「yarn」ランナーを使用して、.eslintrc.jsをカスタマイズしてより多くのチェックを実行できます。詳細については、eslintを参照してください。

プロジェクトに.eslintrc.js設定がない場合、wdio-eslinter-serviceは、テストを実行する前に未解決のインポートのみをチェックするデフォルトの設定を使用するように設定できます。これは、間違ったインポートについてできるだけ早く気付くのに便利です。これを設定するには、次のeslinter設定をservices配列に追加します（すでに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の設定services配列でincludeProjectEslintrcをtrueに設定します。

プラグインの競合に関する問題が発生しました。プロジェクトのeslint設定でも未解決のインポートを検索している場合、これは機能せず、.eslintrc.jsの調整が必要になる可能性があります。現時点では推奨されていません。

高度な代替手段 - npmおよびyarnランナーの使用​

npmおよびyarnランナーは、プロジェクトで既存のeslinter設定を実行するための追加のコントロールを提供します。この設定では、package.jsonのrun-scriptsセクションで実行する追加のコマンドを定義できます。

package.jsonの中に、実行スクリプトにこのエントリを追加します。

{
    "scripts": {
        "eslint": "eslint ."
    }
}

注：npmまたはyarnランナーを使用する場合、サービスが機能するには、package.jsonにeslintを追加する必要があります。

eslintがインストールおよび設定されていない場合は、プロジェクトにインストールおよび設定する必要があります。また、eslint-plugin-importなど、使用しているプラグインもインストールする必要があります。

$ npm i eslint eslint-plugin-import

モジュールエイリアスを実際のパスにマップするためにeslint-import-resolver-custom-aliasプラグインを使用している場合は、これもインストールする必要があります。

$ npm i eslint-import-resolver-custom-alias

プロジェクトにeslintrc設定ファイルがない場合は、.eslintrc.jsファイルを作成する必要があります。以下は、未解決のインポートのみを検索するための基本的な設定です。テストを実行する前に、他のコード品質チェックを検証するようにこの設定を拡張できます。

// .eslintrc.js
module.exports = {
    "parserOptions": {
        "ecmaVersion": 2022
    },
    "plugins": [
        "import"
    ],
    "rules": {
        "import/no-unresolved": [
            2,
            {
                "commonjs": true,
                "amd": false,
                "caseSensitive": true
            }
        ]
    }
}

最後に、wdio.conf.jsのservices配列にeslinterサービスを追加します。

    services: ['eslinter']

npm run eslintを実行して、エラーを確認します。

yarnを使用する場合は、runnerTypeサービスオプションを設定できます。

    services: [
        ['eslinter', { runnerType: 'yarn' }]
    ]

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.

ようこそ！お手伝いできることはありますか？

WebdriverIO AI Copilot