Closed8

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

Hi MORISHIGEHi MORISHIGE

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"]
}
Hi MORISHIGEHi MORISHIGE
e2e/pacakge.json
// ...
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  },
// ...

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

$ npm run cy:open
Hi MORISHIGEHi MORISHIGE

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,
};
Hi MORISHIGEHi MORISHIGE

型定義ファイルの用意

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

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

Hi MORISHIGEHi MORISHIGE

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

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

トップページに移動して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にクローズされました