たかぎとねこの忘備録

プログラミングに関する忘備録を自分用に残しときます。マサカリ怖い。

Expoで簡単なテスト環境を用意する

プロジェクトを準備する

まずはプロジェクトを作ってみよ。

npx create-react-native-app -t with-typescript

テストに必要なパッケージをインストールする

今回は普段使っているJestの代わりにVitestを入れてみる。

vitest.dev

  • 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.jsontestスクリプトを追加する。

// 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

コンソールに次のように表示された完了でし。