Cypress で TypeScript を利用する

環境構築

前回の環境を引き続き利用します。
まずは 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と入力してみると無事サジェストされます。