E2Eテストのあれやこれや

Reactのドキュメントに出てくるライブラリはCypressかpuppeteer
https://ja.reactjs.org/docs/testing-environments.html

このようなシナリオの場合は、Cypress のようなフレームワークや puppeteer のようなライブラリを使うことで、複数のルート間をナビゲートし、ブラウザのみならず、必要に応じてバックエンド側の副作用についても検証を行うことができるでしょう。

vueだと

• Cypress
• Nightwatch
• puppetter
• testcafe
  https://jp.vuejs.org/v2/guide/testing.html#End-to-End-E2E-テスト

導入手順

1. yarn add cypress --dev
2. yarn run cypress open
3. コマンド登録 "cypress:open": "cypress open"
4. コマンド登録 "cypress:run": "cypress run"
5. tsconfigの設定変更
6. cypressディレクトリにisolatedModulesをfalseにしたtsconfig追加

ts対応

https://docs.cypress.io/guides/tooling/typescript-support.html#Install-TypeScript
https://typescript-jp.gitbook.io/deep-dive/intro-1/cypress

'basic_spec.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

exportしてないからダメだよってエラーが出る

https://stackoverflow.com/questions/56577201/why-is-isolatedmodules-error-fixed-by-any-import/56577324

cypressディレクトリにtsconfig追加しよかな

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false
  },
}

いつアサーションするの→アサーションを明示的に書かなくてもアサーションしてるよ
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#When-To-Assert

visitは200かどうかチェックしてるし、getはdomあるか見てるしtypeはtypeできるかどうか以下略・・・

cy.visit() expects the page to send text/html content with a 200 status code.
cy.request() expects the remote server to exist and provide a response.
cy.contains() expects the element with content to eventually exist in the DOM.
cy.get() expects the element to eventually exist in the DOM.
.find() also expects the element to eventually exist in the DOM.
.type() expects the element to eventually be in a typeable state.
.click() expects the element to eventually be in an actionable state.
.its() expects to eventually find a property on the current subject.

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Default-Assertions

cypress run
でcli上で実行される

cypressのciのsetup
https://docs.cypress.io/guides/guides/continuous-integration.html#Setting-up-CI

cypressの環境変数の切り替え(かつ運用tips
https://qiita.com/yousan/items/3c734852292b97f26e77#環境ファイルを切り替える

初回のcypress openで作成されるディレクトリたち

• fixtures テスト時のテストデータをjson形式で定義できる
• intergration 結合テストの定義ファイル置くところ
• plugins なんかplugin作れるんでしょう
• support カスタムコマンドを定義できるところ

jest使ってるとcypressをインストールした時にexpectがChaiと被ったりする
が下記のurl通りにやってもexpectがChaiの型になったまま・・
https://github.com/cypress-io/cypress-and-jest-typescript-example

HACK対応な気がするけどもjestのexpect使いたいテストファイルはimportすることにした

import { expect } from '@jest/globals'

環境ごとにcypressのコンフィグ変えたい場合はcliのオプションで対応する
cypress open --config-file tests/cypress-config.json
https://docs.cypress.io/guides/guides/command-line.html#cypress-open-config-file-lt-config-file-gt

cypressの実行をサーバーが起動するまで待つ
とりあえずローカル確認は先にサーバー起動しといてねでいっか
https://docs.cypress.io/guides/continuous-integration/introduction.html#Setting-up-CI

jestとmocha(cypress)が混合する(テストで使うexpectとか)問題
root直下のtsconfigではcypressディレクトリをincludeしないような設定にする

例) src直下とtest直下のファイルだけコンパイル対象にしたい

{
  "exclude": ["node_modules", "deployments", ".next", "out"],
  "include": [
    "next-env.d.ts",
    "globals.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "test/**/*.ts"
  ]
}

cypress直下はcypress直下のファイルだけコンパイル対象にする

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

どのようにcicdに組み込むか
本番環境やstg環境へのテストはどうするか？(定期的に実行するかしないかとか)

circleciの設定

cypressを実行するのに必要な依存パッケージ
https://docs.cypress.io/guides/getting-started/installing-cypress.html#Linux

今回はcircleci/node:14.16.0-browsersのイメージ使ったから問題なかった

cypressのキャッシュがないとci上で動かないとの事だったのでyarn cypress:installでcypress installしてる

executors:
  with_browsers:
    working_directory: /home/circleci/src/
    docker:
      - image: circleci/node:14.16.0-browsers

  e2e:
    executor: with_browsers
    steps:
      - checkout
      - attach_workspace:
          at: .
      - run:
          name: install cypress
          command: yarn cypress:install
      - run:
          name: e2e test
          command: yarn cypress:staging:run
      - store_artifacts:
          path: cypress/videos
      - store_artifacts:
          path: cypress/screenshots