Expoで簡単なテスト環境を用意する
プロジェクトを準備する
まずはプロジェクトを作ってみよ。
npx create-react-native-app -t with-typescript
テストに必要なパッケージをインストールする
今回は普段使っているJestの代わりにVitestを入れてみる。
- vitest
yarn add -D vitest
hooksをテストしたい場合は、react-hooks-testing-libraryを入れる。
react-test-rendererも必要なのだが、このパッケージのバージョンは現在インストールされているReactのバージョンと一致させないといけないので確認が必要。
yarn add -D @testing-library/react-hooks yarn add -D react-test-renderer@^17.0.2
テストに必要なもろもろの設定
// package.json ... "scripts": { .... "test": "vitest" }, ...
テストファイルを準備
適当にテストファイルを作成する。
※残念ながらhooksのテストではない。
// src/createMockActionRequest.test.ts import { afterAll, test, vitest, expect } from "vitest"; afterAll(() => { vitest.clearAllMocks(); }); /** * action関数で受け取ることができるrequestのmockを作成する関数 * @param {Object} props - formで送信された内容 * @returns {Object} - mockされたrequestオブジェクト */ function createMockActionRequest<T extends { [key: string]: string }>( props: T ) { const formData = () => ({ // getメソッド get: (key: string) => { // keyが存在する場合はpropsのvalueを返す if (key in props) { return props[key]; } // keyが存在しない場合はundefinedを返す return undefined; }, }); return { formData, }; } test("smoke test", () => { const request = createMockActionRequest({ name: "田中太郎", email: "example@example.com", }); expect(request.formData().get("name")).toBe("田中太郎"); expect(request.formData().get("password")).toEqual(undefined); });
テストが作成できたら、テストを実行する。
yarn test createMockActionRequest.test.ts
コンソールに次のように表示された完了でし。