Open3
React学習メモ
ポピポピenv.ts
zod
JavaScriptやTypeScriptのデータを簡単にバリデーションするためのライブラリ
const userSchema = z.object({
name: z.string().min(1, "名前は必須です"),
email: z.string().email("有効なメールアドレスを入力してください"),
age: z.number().min(18, "18歳以上である必要があります"),
});
optional()とnullsih()とnullable()
optional(): nullもundefiendもバリデーションとおる
nullish(): nullかundefinedである必要がある
nullable(): undefiendは許可しない
next-i18next
next-i18next は、Next.js アプリケーションで国際化（i18n）を簡単に実装するためのライブラリです
ポピポピテスト
testing-library/react
testing-library/jest-dom
DOMに関するテストができる。toBeDisabledとかtoBeInvalidとかマッチャーを提供
testing-library/user-event
userEvent.click(checkbox)のような感じでイベントを操作できる
vitest
jestかvitestかどっちかって感じ？
実際のテスト
import { describe, test, expect } from 'vitest';
describe.concurrent('Async Tests', () => {
test('Test 1', async () => {
// 非同期のテスト
await new Promise(resolve => setTimeout(resolve, 1000));
expect(true).toBe(true);
});
test('Test 2', async () => {
// 非同期のテスト
await new Promise(resolve => setTimeout(resolve, 500));
expect(true).toBe(true);
});
});
describe: テストスイートをグループ化するために使用される
test/it: テスト実行
describe.concurrent: 非同期テストを並行して実行する
カスタムフックのテスト
@testing-library/reactというライブラリを用い、擬似的に関数コンポーネントの中でカスタムフックを実行したかのように見せかける
ポピポピuseEffectアンマウント時の対応
クリーンアップ関数
useEffect 内で 返された関数はクリーンアップ関数として以下のタイミングで実行される
- コンポーネントがアンマウントされたとき
- 依存関係が変更された時
useEffect(() => {
const interval = setInterval(() => {
setCountTime((prevTime) => {
if (prevTime <= ZERO) {
clearInterval(interval);
setIsExpired(true);
return ZERO;
}
return prevTime - ONE_SECOND;
});
}, ONE_MILLI_SECOND);
// クリーンアップ関数を呼び出してリソースを解放する
return () => clearInterval(interval);
}, []);