mako_makok.dev

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と入力してみると無事サジェストされます。