NodeとReactを使用したWebアプリ作成用の環境構築その4

続き

https://qiita.com/hidarikiki_toybox/items/b75f38f6e4877adff041
ViteでReactの構築が完了している状態になっていること

Storybookの設定

cmd上でfrontendフォルダへ移動する
下記を実行する

npx storybook init --builder @storybook/builder-vite

eslint-plugin-storybook をインストール していいか聞かれるので eslint を 導入しているなら y を入力する

npx storybook init --builder @storybook/builder-vite
Need to install the following packages:
storybook@8.4.7
Ok to proceed? (y) y
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.4.7 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...


up to date, audited 417 packages in 2s

146 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
 • Adding Storybook support to your "React" app
  ✔ Getting the correct version of 9 packages
    Configuring eslint-plugin-storybook in your package.json
  ✔ Installing Storybook dependencies
. ✓
Installing dependencies...


up to date, audited 506 packages in 1s

186 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook

> frontend@1.0.0 storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet

@storybook/core v8.4.7

info Using tsconfig paths for react-docgen
11:26:48 [vite] ✨ new dependencies optimized: @storybook/blocks
11:26:48 [vite] ✨ optimized dependencies changed. reloading

package.jsonのscriptsに「"storybook": "storybook dev -p 6006"」が追加されていることを確認する。
下記コマンドでstorybookを起動する

npm run storybook

少し使ってみる
storybookの設定は、.storybookフォルダ内のmain.tsを確認する

src\components\TextInput配下に3つのファイルを格納する
・TextInput.tsx
・TextInput.test.tsx
・TextInput.stories.ts
下記を例に３つのファイルを記載する
そしてnpm run storybookを実行する
storybookにTextInputが追加されている

/*TextInput.tsx*/
import { useState } from "react";

const TextInput = () => {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter some text"
        aria-label="Text Input"
      />
      <p>Entered Text: {text}</p>
    </div>
  );
};

export default TextInput;

/*TextInput.test.tsx*/
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import TextInput from "./TextInput";

test("TextInput Component Test", async () => {
  const user = userEvent.setup();
  render(<TextInput />);

  const inputElement = screen.getByLabelText("Text Input");
  expect(screen.getByText("Entered Text:")).toBeInTheDocument();

  await user.type(inputElement, "Hello World");
  expect(screen.getByText("Entered Text: Hello World")).toBeInTheDocument();
});

/*TextInput.stories.ts*/
import type { Meta, StoryObj } from '@storybook/react';
import TextInput from './TextInput';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Example/TextInput',
  component: TextInput,
  tags: ['autodocs'],
} satisfies Meta<typeof TextInput>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = { };