🔰

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

2023/02/22に公開

参照

今回では、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

Discussion