検索条件
タグで絞り込み
Node.js(10)
Node.js::Jest(10)
ライブラリ(7)
ライブラリ::Next.js(1)
ライブラリ::React(6)
言語(10)
言語::TypeScript(10)
全11件
(3/3ページ)
お知らせ
現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
- 投稿日：
フックを単体でテストするケースを想定。
このパターンはコンポーネントからフックを切り離しているケースで有用。手法としては@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');
});