お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

React + TS + Jestでカスタムフックのテストをする

投稿日：
言語::TypeScriptライブラリ::ReactNode.js::Jest開発::テスト

フックを単体でテストするケースを想定。

このパターンはコンポーネントからフックを切り離しているケースで有用。手法としては@testing-library/react-hooksのrenderHook()を使う。

例

カスタムフック

export const useUserForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const onChangeUserName = (ev: string) => {
    setUsername(ev);
  };
  const onChangePassword = (ev: string) => {
    setPassword(ev);
  };

  return {
    username,
    password,
    onChangeUserName,
    onChangePassword,
  };
};

テストコード

it('onChangeUserName で username が設定されること', () => {
  // `renderHook` で Hook をレンダリング
  const { result } = renderHook(() => useUserForm());
  // `act()` で Hook のイベントを叩く
  act(() => result.current.onChangeUserName('foo'));
  // 結果を見る
  expect(result.current.username).toBe('foo');
});
コメント（0件）

React + TS + アロー関数コンポーネントでのforwardRefの書き方

投稿日：
ライブラリ::React言語::TypeScript

TSの情報に乏しく無駄にハマったのでメモ程度に

確認環境

Env Ver
React 17.0.1
TypeScript 4.1.3

サンプルコード

  • 今回はサンプルとして<input />をラップしたコンポーネントのフォーカスを変更するためにrefを使います

Child.tsx

import { forwardRef } from 'react';

export type ChildProps = {
  type: 'text' | 'password' | 'number';
  onChange(changeValue: string): void;
};

// function 記法でないと ESLint が怒るので無効化
// eslint-disable-next-line react/display-name
export const Child = forwardRef<HTMLInputElement, ChildProps>(
  // このpropsに明示的な型定義がないと型エラーが出る
  (props: ChildProps, ref) => {
    const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
      props.onChange(ev.target.value);
    };

    return (
      <input
        ref={ref}
        type={props.type}
        onChange={(ev) => onChange(ev)}
      />
    );
  }
);

Parent.tsx

  • 下側の<Child />だけフォーカスが行くようにしてます
import { useEffect, useRef } from 'react';
import { Child } from './Child';

export const Parent = () => {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    ref?.current?.focus();
  }, []);
  return (
    <ul>
      <li>
        <Child
          type={'text'}
          onChange={(ev) => console.log('top input', ev)}
        />
      </li>
      <li>
        <Child
          ref={ref}
          type={'text'}
          onChange={(ev) => console.log('bottom input', ev)}
        />
      </li>
    </ul>
  );
};
コメント（0件）