Closed8

CypressをTypeScriptでセットアップする際のメモ

TypeScript Deep Diveを参考にセットアップ。
Cypressをプロジェクトに依存させないよう独立したディレクトリ内で構成する。

testing-libraryのcypress拡張版@testing-library/cypressもあわせてインストール。

mkdir e2e
cd e2e
npm init -y
npm install cypress typescript @testing-library/cypress

tsconfig.jsonファイルを作成

e2s/tsconfig.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["node_modules/cypress", "./**/*.ts"]
}
e2e/pacakge.json
// ...
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  },
// ...

cypress初回起動で初期ファイルを生成

$ npm run cy:open

eslintやprettierなど便利ツールのセットアップ

$ npm install eslint eslint-plugin-cypress prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
e2e/.eslintrc.js
module.exports = {
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:cypress/recommended',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'cypress'],
  root: true,
};

型定義ファイルの用意

e2e/index.d.ts
declare namespace Cypress {
  interface Chainable {
    isExistElement(cssSelector: string): Cypress.Chainable<boolean>;
  }
}

e2e/cypress/plugins/index.jsをTypeScript書き換え

e2e/cypress/plugins/index.js
// eslint-disable-next-line @typescript-eslint/no-empty-function
export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {};

e2e/cypress/support/commands.js -> e2e/cypress/support/commands.ts
e2e/cypress/support/index.js -> e2e/cypress/support/index.ts

環境に合わせてbaseUrlとchromeの設定を記載。

e2e/cypress.json
{
  "baseUrl": "http://localhost:3000",
  "chromeWebSecurity": false
}

トップページに移動してIndex Pageが表示されているかどうかの仮テスト。

e2e/cypress/integration/toppage.spec.ts
describe('トップページ', () => {
  beforeEach(() => {
    cy.visit('/');
  });
  it('should show title', () => {
    cy.contains('Index Page').should('exist');
  });
});

詳しくはドキュメントで。

https://docs.cypress.io/api/table-of-contents
このスクラップは2022/03/10にクローズされました
ログインするとコメントできます