React 自作ページネーションのロジック部分の単体テスト　結論：ChatGptでテストコードは書ける

# 概要
[React UIとロジック部分を分離する-題材はページネーション](https://qiita.com/RYA234/items/a13bdc6810c3bed6672c)
の続きです。今回はCustomHook化したロジック部分のテストコードを書きます。

# 開発環境
IDE:VScode

├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.6
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

# 実装

## プロダクトコード
```diff_tsx:usePagination.ts
import { Dispatch, SetStateAction } from "react";

export default function usePagination(props:{totalPage:number ,pageNo:number, setPageNo:Dispatch<SetStateAction<number>>}){
    let currentPageNo = 1;
    const totalPage: number = 10;
    let paginationContent: JSX.Element[] = [];
  
    // 前へボタンを押したときの処理
    const backHandler = () => {
      props.setPageNo( props.pageNo - 1)
    };
  
    // 次へボタンを押したときの処理
    const nextHandler = () => {
      props.setPageNo(props.pageNo + 1)
      console.log(props.pageNo);
    };
  
    // ページ番号を押したときの処理
    const selectNumberHandler = (pg: number) => {
      props.setPageNo(pg)
    };
    return{paginationContent, backHandler, nextHandler, selectNumberHandler}
}
```


## テストコード
ChatGptにプロダクトコードを張ってテストコードを生成しました。
AAAパターンで書かれており、違和感を感じなかったので採用します。
私がコード上に加えた内容は日本語部分のみです。
typeScriptのテストフレームワークの文法を即把握できるので時短になりました。
ChatGpt無しで書いたら6hは位はかかるかなと予測したのですが、ChatGpt有だと一瞬で終わりました。

```diff_tsx:usePpagination.test.ts
import usePagination from './usePagination';
import { act, renderHook } from '@testing-library/react-hooks';

// テストコードはAAAパターンに基づいて書く

describe('usePaginationの単体テスト', () => {
 

  // backHandlerのテスト
  // positive Pattern
  test('Arrange:PageNo=2,totalPage=10の時、Act:戻るボタンを押したとき、Assert:PageNo=1,totalPage=10になる', () => {
   
    // Arrange
    const props = {
      totalPage: 10,
      pageNo: 2,
      setPageNo: jest.fn(),
    };
    const { result } = renderHook(() => usePagination(props));

    // Act
    act(() => {
      result.current.backHandler();
    });

    // Assert
    expect(props.setPageNo).toHaveBeenCalledWith(1);
  });

  // nextHandlerのテスト
  // positive Pattern
  test('Arrange:pageNo=9の時,Act:nextHandlerを実行したとき、Assert:pageNo=10 ', () => {
    // Arrange
    const props = {
      totalPage: 10,
      pageNo: 9,
      setPageNo: jest.fn(),
    };
    const { result } = renderHook(() => usePagination(props));
    // Act
    act(() => {
      result.current.nextHandler();
    });
    // Assert
    expect(props.setPageNo).toHaveBeenCalledWith(10);
  });

    // selectNumberHandlerのテスト
  // positive Pattern
  test('Arrange:pageNo=10 :should update page number when a page number is clicked', () => {
    const props = {
      totalPage: 10,
      pageNo: 5,
      setPageNo: jest.fn(),
    };
    const { result } = renderHook(() => usePagination(props));

    act(() => {
      result.current.selectNumberHandler(7);
    });

    expect(props.setPageNo).toHaveBeenCalledWith(7);
  });
});

```


# 結果の画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0b01c6d9-7901-0b40-fc31-2ba0eb6cbf8b.png)



# 参考

Chatgptを使用
「Write testcode below this code」と入力

https://openai.com/blog/chatgpt