いい感じのRemixのディレクトリ構成

./app
├── .server     # Remix Viteでは.serverディレクトリのみサポートしている
│  ├── actions # action用のコードを配置するディレクトリ
│  │  ├── index.ts
│  │  ├── ...色々なaction
│  │  └── indexAction
│  │     ├── index.ts
│  │     └── index.test.ts
│  └── loaders # loader用のコードを配置するディレクトリ
│     ├── index.ts
│     ├── ...色々なloaderファイル
│     ├── indexLoader
│     │  ├── index.ts
│     │  └── index.test.ts
│     └── rootLoader
│        ├── index.ts
│        └── index.test.ts
├── components  # Reactコンポーネントを配置するディレクトリ
│  ├── ...色々なコンポーネント
│  └── index.ts
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
└── routes      # route用のコードを配置するディレクトリ
   ├── ...色々なrouteファイル
   └── _index.tsx

import type { LoaderFunctionArgs } from "@remix-run/node";

export async function indexLoader({ request }: LoaderFunctionArgs) {
  // 色々なコードを書く
  return {
    // 色々なものを返す
  };
}

// loaderの戻り値の型も一緒に返しておくとuseLoaderDataで便利に使える
export type IndexLoader = typeof indexLoader;

import { indexIndexLoader } from ".";
import type { LoaderFunctionArgs } from "@remix-run/node";

test("return valid data", async () => {
  const loaderFunctionArgs: LoaderFunctionArgs = {
    request: new Request("https://example.com", {
      method: "GET",
    }),
    params: {},
    context: {},
  };
  const loaderData = await indexIndexLoader(loaderFunctionArgs);
  const res = await loaderData.json();
  expect(res).toEqual({
    // loaderが返すデータ
  });
});

export * from "./indexLoader";

import { useLoaderData } from "@remix-run/react";
import type { IndexIndexLoader } from "~/.server/loaders";
// Routeファイルからas loaderとしてexportすれば、loaderモジュールとして機能する
export { indexIndexLoader as loader } from "~/.server/loaders";

export default function Index() {
  // IndexIndexLoaderを指定することで、dataに型情報がつく
  const data = useLoaderData<IndexIndexLoader>();
  return (
    // クライアントコンポーネントでdataを利用する
  )
}

import { indexAction } from ".";
import type { ActionFunctionArgs } from "@remix-run/node";

test("return error if formData is blank", async () => {
  const formData = new FormData();
  // フォームの値があれば追加する
  // formData.append("name", "value");
  const actionFunctionArgs: ActionFunctionArgs = {
    request: new Request("https://example.com", {
      method: "POST",
      body: formData,
    }),
    params: {},
    context: {},
  };
  const actionData = await indexAction(actionFunctionArgs);
  const res = await actionData.json();
  expect(res).toEqual({
    // エラーのときの戻り値
  });
});