問題点

セットアップ方法がわからない。

https://selfstudy-programming.com/Next/TestLibrary/CypressSetting/

ESLint: 'cy' is not defined (Cypress)がでる
npm install -D eslint-plugin-cypress eslint-plugin-jest
で、

{
  "extends": [
    "plugin:cypress/recommended"
  ]
}

module.exports = {
  env: {
    ...
    "jest/globals": true,
  },
  ...
  plugins: [
    ...
    "jest",
  ],

モックサーバーが立ち上がる前にテストを実行しちゃう。
npm install --save-dev start-server-and-test

"cy:run": "cypress run",
  "test": "start-server-and-test start http://localhost:3000 cy:run"

これでもまだだめっぽい。これでやるとそもそもmswが立ち上がらないのでcypressのbeforeEachの中でmswは立ち上げる必要が生まれる。

これはnpm run startでやるから？

→devに変えてみる。

"cy:run": "cypress run",
  "test": "start-server-and-test dev http://localhost:3000/api/search cy:run"

なんか立ち上がってはいるっぽい。しかし、いつまでもcypressが開かない。

1: starting server using command "npm run dev"
and when url "[ 'http://localhost/api/search' ]" is responding with HTTP status code 200
running tests using command "npm run cy:open"

よさそうなんだけどもな。http://localhost:3000/api/searchで直接ブラウザとかにいって200が返ってこないといけないぽい。

apiリクエストの200返答

support/command.tsでサーバーを立ち上げてみる。→変わらない。

そこで、

cypress側でなんとかしてみる。まずはcypressで特定のネットワークリクエストを監視し、テスト内でそのリクエストを確認する機能を使ってみる。

cy.interceptについて調べる。

なんかcy.wati(10000)とかでいけそう。。

importが相対パスじゃないと通らない。

めも

コンポーネントに対して、

data-testでやっておくと取得しやすい。

<li
  data-test="suggest-item"
  key={suggest.suggest}
  className="border-t border-gray-200"
>

cy.get("[data-test='suggest-item']").should("have.length", 3);