フロントエンドテストを書きやすくするために工夫したこと

1. フロントエンドテストを 書きやすくするために工夫したこと 2024/06/11 横山 隼 UV Study Lightning Talks #50
2. 自己紹介 • ディップ株式会社 • 2022年新卒入社 • フロントエンドエンジニア • X: @hayatoyokoyama_ • GitHub: @hayato-yokoyama 横山 隼
3. フロントエンドのテストは書いていますか？
4. 現在、会社の開発チームでは、ページ単位で行う E2Eテストと、 コンポーネント単位で行うユニットテスト の2種類のテストを行っています。 ページ ページ (page.tsx) E2Eテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト
5. 現在、会社の開発チームでは、ページ単位で行う E2Eテストと、 コンポーネント単位で行うユニットテスト の2種類のテストを行っています。 ページ ページ (page.tsx) E2Eテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト コンポーネント ユニットテスト ここのテストを 書きやすくした話
6. ユニットテストはコンポーネントとセットで テンプレートから作成する
7. 実現するにあたって Hygen というライブラリを使用しました https://www.hygen.io/
8. とりあえず見てみよう
10. どのディレクトリに配置するか
11. 使い分けたい camelCase/PascalCase/… もカスタマイズ可能
12. コンポーネント、テスト、Storybookなどは、 コンポーネント名を与えたら、中身以外の枠組みは共通化できる import { render, screen } from "@testing-library/react"; import Button from "./button"; describe("Buttonコンポーネント", () => { test("ラベルが正しくレンダリングされること ", () => { render(<Button label="Click Me" onClick={() => {}} />); expect(screen.getByText("Click Me")).toBeInTheDocument(); }); }); type ButtonProps = { label: string; onClick: () => void; type?: "button" | "submit" | "reset"; disabled?: boolean; }; const Button = ({ label, onClick, disabled, type }: ButtonProps) => { return ( <button type={type} onClick={onClick} disabled={disabled}> {label} </button> ); }; export default Button; コンポーネント テスト
13. コンポーネント、テスト、Storybookなどは、 コンポーネント名を与えたら、中身以外の枠組みは共通化できる import { render, screen } from "@testing-library/react"; import Button from "./button"; describe("Buttonコンポーネント", () => { test("ラベルが正しくレンダリングされること ", () => { render(<Button label="Click Me" onClick={() => {}} />); expect(screen.getByText("Click Me")).toBeInTheDocument(); }); }); type ButtonProps = { label: string; onClick: () => void; type?: "button" | "submit" | "reset"; disabled?: boolean; }; const Button = ({ label, onClick, disabled, type }: ButtonProps) => { return ( <button type={type} onClick={onClick} disabled={disabled}> {label} </button> ); }; export default Button; コンポーネント テスト
14. コードを自動生成させることで … • 時間を節約 、コードスタイルの統一化 • 自動的にテストコードも生成させることで、 テストの書き忘れを防ぐ ことができる • 最初からテストを書き始められる状態 なので、心理的なハードルが低い
15. ちなみに、テンプレート化できるものなら、 言語・フレームワーク、用途を問わず、何でも使用できる
16. 導入方法
17. 導入手順 1. Hygenをインストール 2. プロンプトの設定 3. テンプレートの生成 4. Hygenコマンドの登録
18. 1. Hygenをインストール npm install --save-dev hygen
19. 2. プロンプトの設定 module.exports = [ { type: "input", name: "name", message: "コンポーネント名を入力してください ", }, { type: "confirm", name: "haveStorybook", message: "Storybookファイルを追加しますか？", default: false, }, ];
20. 3. テンプレートの生成 --- to: app/components/<%= name %>/<%= name %>.test.tsx unless_exists: true --- import { render, screen } from "@testing-library/react"; import <%= name %> from "./<%= name %>"; test("<%= name %>コンポーネントのテキストがレンダリングされること ", () => { render(<<%= name %> text="テキスト" />); expect(screen.getByText("テキスト")); });
21. 4. Hygenコマンド登録 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "test": "jest", "add-component": "hygen component new" // 追加 },
22. 以上
23. 気をつけたほうがいいこと
24. 気をつけたほうがいいこと • 「テンプレートからコンポーネントを作る」というルールを 意識的に徹底する必要がある （仕組みで強制できない） • 冗長なテスト、不要なテストが出来やすくなる
25. まとめ
26. まとめ • テンプレート生成ツールを使う ことで、テストがかなり書きやすくなった • 「テンプレートからコンポーネントを作成する」というルールを チームで意識的に徹底する 必要がある
27. 参考リンク・その他 参考リンク • hygen で生成 - 対話形式の Component 雛形 - テンプレート生成に関する Hygenの代替ライブラリ • Plop • Yeoman …
28. ありがとうございました！！！！