0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-02-24

参照

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

optional for vscode launcher: 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"
      }
    }
  ]
}

DIRは、下記図の通り。

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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?