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

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

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["node_modules/cypress", "./**/*.ts"]
}

// ...
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  },
// ...

$ npm run cy:open

$ npm install eslint eslint-plugin-cypress prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

module.exports = {
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:cypress/recommended',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'cypress'],
  root: true,
};

declare namespace Cypress {
  interface Chainable {
    isExistElement(cssSelector: string): Cypress.Chainable<boolean>;
  }
}

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

{
  "baseUrl": "http://localhost:3000",
  "chromeWebSecurity": false
}

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