Next.jsのインストールから、Cypressでテスト（e2e only）まで

参照

今回では、Create a Next.js Appではなく、DocumentationのGet Startを参考して、構築しに行く

Next.jsのインストール..

requirements

node (>= 14.6)
yarn (1.22)：npm npxもよい、お好みで
MacOS, Windowsm Linux

自動か、手動でsetup & run nextjs

• 自動 yarn create next-app
  ↑　今回はこちらにしました、コマンドプロンプトからいろいろきかれますが、今回は全部yes
• 手動 yarn add next react react-dom
• run yarn dev
  

set up vscode launch.json

• in {work space}/.vscode/launch.json copy following source

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

ディレクターは、下記図の通り。

Cypressでテスト（e2e only）

cypress

• End-to-End (E2E) ：今回はこちらのみ
• Component Testing
• yarn add & run

1. run cypress: yarn run cypress
   
2. choose left one
   
3. choose Chrome and commit with the green bottom below
   
4. choose the source just added which was app.cy.js
   
5. run the test