migrate-codeceptjs-4 について
CodeceptJS 3.x のプロジェクトを、ESM 専用で TypeScript を重視する 4.x へ移行するためのスキルです。コード、設定、依存関係、テストの更新を案内し、Mochawesome の扱いは利用者の判断に委ねます。
主な機能
- 01CodeceptJS 3.x の移行兆候を検出
- 02プロジェクトファイルを ESM に変換
- 03削除された機能の代替策を提示
- 04変更された API と依存関係を更新
- 05設定とテストを検証
活用シーン
- 01既存の CodeceptJS 3.x テストスイートの更新
- 02CommonJS のヘルパーと設定の移行
- 03削除されたプラグインや変更 API への対応
- 04変更のマージ前に移行結果を検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ codeceptjs/ skills --skill migrate-codeceptjs-4インストール後、Claude Code で/migrate-codeceptjs-4を入力して読み込まれたか確認します。
詳細
CodeceptJS 3.x → 4.x への移行
CodeceptJS 4 はESM のみで、TypeScript を優先しています。CommonJS との互換性を保つための仕組みはありません。すべてのヘルパー、ページオブジェクト、カスタムステップ、設定ファイルを ESM にする必要があります。このスキルでは、アップグレードを最初から最後まで進めます。
正式なリファレンスは node_modules/codeceptjs/docs/migration-4.md(npm install codeceptjs@4 の実行後)です。一度目を通してください。このスキルでは作業を統括し、エージェントが見落としがちな点を取り上げます。
実行するタイミング
作業を始める前に検出してください。次のいずれかに当てはまるか確認します。
package.jsonに"codeceptjs": "^3"/"3.x"が記載されている、または"type": "module"がない。- テスト、ページオブジェクト、ヘルパー、設定で、CodeceptJS に対して
require()/module.exportsを使用している。 - 設定で削除済みのヘルパー(
Nightmare、Protractor、TestCafe、AI、SoftExpectHelper、Mochawesome)または削除済みのプラグイン(autoLogin、tryTo、retryTo、eachElement、commentStep、fakerTransform、enhancedRetryFailedStep、allure、htmlReporter、wdio、selenoid、screenshotOnFail、pauseOnFail、stepByStepReport)を参照している。 - 3.x の API(
ai.request、seeResponseMatchesJsonSchemaの Joi スキーマ、restart: 'browser'、I.retry()、I.limitTime()、Playwright のcustomLocators、I.softExpect*/I.flushSoftAssertions)を使用している。 - スクリプト/CI に
--reporter mochawesomeがある、またはpackage.json/mocha.reporterOptionsにmochawesomeがある。
3.x を示すものがなければ、プロジェクトはすでに 4.x を使用している可能性があります。codeceptjs-fundamentals に引き継いでください。
ワークフロー
各フェーズは順番に進めます。回帰が発生した場合に二分探索できるよう、各フェーズの区切りでコミットしてください。
1. Node と CodeceptJS のバージョンを上げる
- Node が 16 以上であることを確認します(20 以上を推奨)。
engines.nodeと CI ランナーを更新します。 npm install codeceptjs@4を実行します。- TypeScript プロジェクトでは、
npm install --save-dev tsxを実行します。警告が出るようになったts-node/esmの代わりになります。
2. プロジェクトを ESM に変換する
package.jsonに"type": "module"を追加します。これがないと、すべての.jsファイルが CommonJS として解析され、ESM のインポートは読み込み時にエラーになります。- 設定、ページオブジェクト、カスタムヘルパー、カスタムステップ、プログラムからの使用を変換します。
const Helper = require('@codeceptjs/helper')→import Helper from '@codeceptjs/helper'module.exports = X→export default X(または名前付きエクスポート)const { codecept, container, event } = require('codeceptjs')→import codeceptjs, { container, event } from 'codeceptjs'
Container.create()とConfig.load()は非同期になったため、awaitを付けます。- 本当に CJS が必要なファイル(まれで、通常はサードパーティーのシム)は、
.cjsに名前を変更します。
3. 削除されたヘルパーとプラグインを削除または置き換える
| 旧版 | 置き換え先 |
|---|---|
ヘルパー Nightmare/Protractor/TestCafe | Playwright、Puppeteer、または WebDriver。 |
ヘルパー AI | トップレベルの ai: 設定と aiTrace プラグイン。 |
ヘルパー SoftExpectHelper | import { hopeThat } from 'codeceptjs/effects' を使用し、シナリオの最後に hopeThat.noErrors() を呼び出します。 |
ヘルパー Mochawesome | 作業を止めてユーザーに確認してください。「Mochawesome の選択」を参照してください。黙って削除しないでください。 |
プラグイン autoLogin | auth プラグイン(codeceptjs-auth スキルを参照)。 |
プラグイン tryTo/retryTo | import { tryTo, retryTo } from 'codeceptjs/effects' |
プラグイン eachElement | import { eachElement } from 'codeceptjs/els' |
プラグイン commentStep | import step from 'codeceptjs/steps' → step.section('name')/step.endSection() |
プラグイン fakerTransform | テスト内で import { faker } from '@faker-js/faker' を直接使用します。 |
プラグイン enhancedRetryFailedStep | retryFailedStep に改名されました。 |
プラグイン allure/htmlReporter | @testomatio/reporter(HTML パイプ)。JUnit XML には junitReporter プラグインを使用します。 |
プラグイン wdio/selenoid | helpers.WebDriver で設定するか、外部で実行します。 |
プラグイン screenshotOnFail/pauseOnFail/stepByStepReport | screenshot/pause/slides: true を指定した screenshot に改名されました。旧名も引き続き使用できますが、非推奨の警告が出ます。 |
Mochawesome に関する判断
同梱の Mochawesome ヘルパーは 4.x で削除されています(ヘルパークラス、mochawesome 依存関係、ワーカーレポートディレクトリの連携)。mochawesome レポーター自体は引き続き動作します。これは標準の Mocha レポーターであり、CodeceptJS に同梱する必要はありませんでした。
これはユーザーが選択する項目であり、代わりに選んではいけません。Mochawesome を検出した場合(helpers: 内のヘルパー、--reporter mochawesome、または package.json/mocha.reporterOptions 内の mochawesome)、作業を止めて、どの方法を希望するか尋ねてください。
@testomatio/reporterに切り替える(推奨)。 より高機能な HTML レポート(ステップ、スクリーンショット、動画、トレース)を生成でき、ワーカーに対応しており、ヘルパーや内部実装への依存もありません。npm install --save-dev @testomatio/reporterを実行してtestomatioプラグインを有効にし、TESTOMATIO_DISABLE_UPLOAD=1を指定して実行します。JUnit XML を追加するには、junitReporterプラグインを追加します。推奨する方法はこちらです。- Mochawesome を維持する — レポートのみ。
helpers:からMochawesomeヘルパーを削除し、npm i -D mochawesomeと--reporter mochawesome --reporter-options reportDir=outputはそのまま維持します。ヘルパーが提供していた、失敗時のスクリーンショットを自動で埋め込む機能は失われます。 - Mochawesome を維持する — スクリーンショットを埋め込む。
helpers:からヘルパーを削除し、mochawesome/addContextをラップするプロジェクトローカルのカスタムヘルパーとして再作成します(忠実な移植版は、移行ガイドの「Keeping Mochawesome」セクションにあります)。次の 2 つの注意点を伝えてください。非 semver 安定のcodeceptjs/lib/*内部実装をインポートするため、バージョンを固定する必要があります。また、スクリーンショットプラグインとのファイル名の同期は自動ではなくなったため、ヘルパーとscreenshotプラグインの両方でuniqueScreenshotNamesを同じ値に設定する必要があります。
いずれの場合も、カスタムワーカースクリプトから mochawesome のレポートディレクトリ処理を削除し、I.addMochawesomeContext() に依存している箇所を置き換えてください(この機能を維持するのは方法 3 のみです)。
選択肢 1~3 を明示し、変更を加える前にユーザーに決めてもらってください。既定の推奨は方法 1 です。完全なリファレンス(変更前/変更後の設定とカスタムヘルパーへの移植版)は、node_modules/codeceptjs/docs/migration-4.md →「Mochawesome → Testomat.io Reporter」にあります。
4. 変更された API を更新する
- AI 設定 —
request関数を削除します。Vercel AI SDK とプロバイダーをインストールし(npm install ai @ai-sdk/openai)、ai: { model: openai('gpt-5') }を設定します。@ai-sdk/anthropic、@ai-sdk/googleなども同じ形式です。 - JSON スキーマ —
I.seeResponseMatchesJsonSchema()では Joi ではなく Zod を使用するようになりました。書き換えます(Joi.object().keys({...})→z.object({...})、Joi.string().required()→z.string()など)。その後、npm uninstall joiを実行します。 - Playwright —
restart: 'browser'を'session'(既定値)、'context'、または'keep'に置き換えます。customLocators設定は削除し、customLocatorプラグインまたは ARIA ロケーター({ role: 'button', name: 'Submit' })を使用します。 I.retry()/I.limitTime()— 削除されました(非推奨になっただけではありません)。ステップオプション API に置き換えます。import step from 'codeceptjs/steps'を実行し、設定をステップの最後の引数として渡します。I.retry(3).click('Submit')→I.click('Submit', step.retry(3)、I.limitTime(10).fillField('Email', x)→I.fillField('Email', x, step.timeout(10))。また、step.opts({ elementIndex: 2 })も使用できます。オプションが次のステップに引き継がれなくなる点を除き、動作に変更はありません。recorder.retry()には影響しません(カスタムヘルパーのみ)。withinとsession— グローバルではなくなりました。import { within, session } from 'codeceptjs'(またはwithinはcodeceptjs/effectsから)を使用します。どちらも Promise を返します。戻り値が必要な場合はawaitを付けてください。- サブパスのインポート —
codeceptjs/effects、codeceptjs/els、codeceptjs/steps、codeceptjs/store、codeceptjs/assertions。完全な一覧は移行ガイドを参照してください。 tryTo/hopeThat—Promise<boolean>を返します(3.x のPromise<T | false>形式は廃止されました)。
5. noGlobals: true を採用する
3.x では、Helper、actor、inject、share、secret、locate、dataTable、within、session、codecept_dir、output_dir がグローバルとして公開されていました。4.x では新しい設定ファイルで noGlobals: true がデフォルトになり、設定されていないプロジェクトには警告が表示されます。設定に追加し、グローバルを codeceptjs/@codeceptjs/helper からの明示的なインポートに置き換えてください。テストランナーのグローバル(Feature、Scenario、Before、After、BeforeSuite、AfterSuite、pause、inject、share)と BDD ステップ定義のグローバル(Given、When、Then、And)はそのままです。これらはランナーによってスコープに注入されます。
6. 依存パッケージを更新する
プロジェクトが以下に直接依存している場合は、問題が発生しないことを確認してください:chai(4 → 6、ESM のみ)、chai-as-promised(7 → 8)、commander(11 → 14)、@faker-js/faker(9 → 10)、chokidar(4 → 5)、@cucumber/gherkin(35 → 38)、webdriverio(9.12 → 9.23)。joi と testcafe は削除されました。全表については、移行ガイド §7 を参照してください。
7. 検証する
以下の順に実行します。
npx codeceptjs check -c <config>— ブラウザーを起動せずに、設定/ヘルパー/プラグイン/ページオブジェクトの問題を検出します。- 小規模なスモークシナリオで
npx codeceptjs run --debugを実行します。ステップが実行され、レポートに問題がないことを確認します。 npx codeceptjs run-workers 2を実行します。ワーカーイベントディスパッチャーが、単一プロセスモードと同じ方法でテストごとのイベントを発行することを確認します(4.x の変更点)。- TypeScript ユーザー:エラースタックトレースが
.tsのソース行を指していることを確認します(ts-node/esmではなくtsxが読み込まれている証拠です)。 - リポジトリ内を
tryTo(、retryTo(、eachElement(、commentStep(、softExpect、I.softExpect、Joi.、restart: 'browser'、I.retry(、I.limitTime(、および(ユーザーが残すことを選択していない場合は)Mochawesome/--reporter mochawesomeで検索し、どれも残っていないことを確認します。ステップ引数として渡されるstep.retry(/step.timeout(は、置き換え後の想定される記述であり、残存箇所ではありません。 - プロジェクトで
autoLoginを使用していた場合は、authプラグインがセッションとロールを復元することを確認します。
関連スキル
codeceptjs-auth— 削除されたautoLoginプラグインの代替codeceptjs-fundamentals— 配線を確認するため、移行後に実行- 完全なリファレンス:
node_modules/codeceptjs/docs/migration-4.md