環境構築
前回の環境を引き続き利用します。
まずは TypeScript のセットアップをします。
npm install typescript
npx tsc --init --types cypress --lib dom,esnext --target esnext --module esnext
js ファイルを ts ファイルに置換します。
cd cypress
find . -name '*.js' | xargs rename 's/js/ts/'
Cypress を起動します。
npx cypress open
あとは適当なテストを選択すると、テストが実行されると思います。 ひとまず TS で動くようになりました。
Additional Setting
とりあえずは動くようになりましたが、まだ不十分なのでいくつか設定が必要です。
plugins/index.ts の修正
cypress/plugins/index.tsを開いてみると、おそらくmodule.exportsの部分でエラーになっていると思うので以下のように修正します。
tsconfig.json
{
...
"types": ["cypress", "node"]
...
}
cypress/plugins/index.ts
module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
カスタムコマンドを TypeScript で書いてサジェストできるようにする
前回はカスタムコマンドを js で書いてみましたが、TypeScript で書くこともできます。
型を書けばcy.からサジェストできるようになるので、今回は一例を示します。
ログインを行う処理がコメントアウトされているので、外して型を書きます。
Cypress.Commands.add('login', (email: string, password: string) => {})
この状態で適当な spec.ts を開いてcy.loginと書いてもそんなものはないので怒られます。ちょっと面倒ですが、Cypress の namespace に生やして上げる必要があります。
Cypress.Commands.add('login', (email: string, password: string) => {})
declare global {
namespace Cypress {
interface Chainable<Subject> {
login(email: string, password: string): Chainable<Subject>
}
}
}
export {}
再度 spec.ts を開いてcy.loginと入力してみると無事サジェストされます。