Vitest で beforeAll が実行されない

Question

実現したいこと

Remix で実装したコンポーネントのテストコードを Vitest で書いています．
テスト環境ではバックエンドのサーバを MSW でモックしようとしています．
beforeAll 内で MSW のモックサーバを起動したいです．

発生している問題・分からないこと

beforeAll が実行されないためモックサーバが起動せず，fetch でエラーが発生する．

エラーメッセージ

TypeError: fetch failed
    at node:internal/deps/undici/undici:12500:13
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Module.customFetch (/path/to/repository/frontend/client/mutator.ts:5:14)
    at Module.loader (/path/to/repository/frontend/app/routes/home.users._index/route.tsx:27:19)
    at loader (/path/to/repository/frontend/test/routes/home.users._index/route.test.tsx:15:11)
    at /path/to/repository/frontend/node_modules/.pnpm/@remix-run+router@1.19.2/node_modules/@remix-run/router/router.ts:4902:19
    at callLoaderOrAction (/path/to/repository/frontend/node_modules/.pnpm/@remix-run+router@1.19.2/node_modules/@remix-run/router/router.ts:4966:16)
    at async Promise.all (index 0)
    at defaultDataStrategy (/path/to/repository/frontend/node_modules/.pnpm/@remix-run+router@1.19.2/node_modules/@remix-run/router/router.ts:4775:17)
    at callDataStrategyImpl (/path/to/repository/frontend/node_modules/.pnpm/@remix-run+router@1.19.2/node_modules/@remix-run/router/router.ts:4838:17)

該当のソースコード

/// <reference types="vitest" />
import {
	vitePlugin as remix,
	cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from '@remix-run/dev';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
	plugins: [
		remixCloudflareDevProxy(),
		!process.env.VITEST
			? remix({
					future: {
						v3_fetcherPersist: true,
						v3_relativeSplatPath: true,
						v3_throwAbortReason: true,
					},
				})
			: null,
		tsconfigPaths(),
	],
	server: {
		proxy: {},
		https: {
			key: './certs/key.pem',
			cert: './certs/cert.pem',
		},
	},
	test: {
		alias: {
			'~/*': './app/*',
		},
		env: {
			NODE_TLS_REJECT_UNAUTHORIZED: '0',
		},
		environment: 'happy-dom',
		globals: true,
		setupFiles: ['./test/setup.ts'],
	},
});

import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { setupServer } from 'msw/node';
import { handlers } from './mocks/handlers';

const server = setupServer(...handlers);

beforeAll(() => {
	server.listen({
		onUnhandledRequest: 'error',
	});
});

afterEach(() => {
	server.resetHandlers();
	cleanup();
});

afterAll(() => {
	server.close();
});

import {
	ActionFunctionArgs,
	json,
	LoaderFunctionArgs,
	redirect,
} from '@remix-run/cloudflare';
import { useLoaderData, useNavigate } from '@remix-run/react';
import { deleteUser, getUsers, getUsersResponse } from 'client/client';
import UsersListComponent from '~/components/users/UsersListComponent';
import { commitSession, getSession } from '~/services/session.server';
import { ActionResponse } from '~/types/response';

interface LoaderData {
	usersResponse: getUsersResponse;
	condition: {
		page?: string;
		limit?: string;
	};
}

export const loader = async ({ request }: LoaderFunctionArgs) => {
	// 検索条件を取得する
	const url = new URL(request.url);
	const page = url.searchParams.get('page') ?? undefined;
	const limit = url.searchParams.get('limit') ?? undefined;
	// ユーザー情報を取得する
	const response = await getUsers({ page: page, limit: limit });

	return json<LoaderData>({
		usersResponse: response,
		condition: {
			page: page,
			limit: limit,
		},
	});
};

export const action = async ({ request }: ActionFunctionArgs) => {
	const session = await getSession(request.headers.get('Cookie'));
	const formData = await request.formData();
	const userId = String(formData.get('userId'));

	// 未ログインの場合
	if (!session.has('user')) {
		session.flash('error', 'ログインしてください');
		return redirect('/login', {
			headers: {
				'Set-Cookie': await commitSession(session),
			},
		});
	}

	const cookieHeader = [
		`__Secure-user_id=${session.get('user')?.id};`,
		`__Secure-session_token=${session.get('user')?.sessionToken}`,
	].join('; ');

	const response = await deleteUser(userId, {
		headers: { Cookie: cookieHeader },
	});

	switch (response.status) {
		case 204:
			session.flash('success', 'ユーザーを削除しました');
			if (Number(userId) === session.get('user')?.id) {
				session.unset('user');
				session.flash('success', 'ログアウトしました');
				return redirect('/home', {
					headers: {
						'Set-Cookie': await commitSession(session),
					},
				});
			}
			break;

		case 401:
			session.flash('error', 'ログインしてください');
			return redirect('/login', {
				headers: {
					'Set-Cookie': await commitSession(session),
				},
			});

		case 404:
			session.flash('error', 'ユーザーが見つかりませんでした');
			break;

		case 500:
			session.flash('error', 'サーバーエラーが発生しました');
			break;
	}
	return json<ActionResponse>(
		{ method: 'DELETE', status: response.status },
		{
			headers: {
				'Set-Cookie': await commitSession(session),
			},
		},
	);
};

const UsersListPage = () => {
	const { usersResponse, condition } = useLoaderData<typeof loader>();
	const { page, limit } = condition;
	const navigate = useNavigate();

	const handlePaginationChange = (newPage: number) => {
		const params = new URLSearchParams();

		if (limit) {
			params.append('limit', limit);
		}
		params.append('page', String(newPage));

		navigate(`/home/users?${params.toString()}`);
	};

	const handleLimitChange = (newLimit: number) => {
		navigate(`/home/users?limit=${newLimit}`);
	};

	return (
		<UsersListComponent
			paginationProps={{
				handlePaginationChange: handlePaginationChange,
				handleLimitChange: handleLimitChange,
				page: page ? Number(page) : undefined,
				limit: limit ? Number(limit) : undefined,
				total: usersResponse.data.totalUser,
			}}
			usersResponse={usersResponse}
		/>
	);
};

export default UsersListPage;

import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/cloudflare';
import { createRemixStub } from '@remix-run/testing';
import { screen, waitFor } from '@testing-library/react';
import { customRender } from 'test/helpers/wrapper';
import UsersListPage, {
	action,
	loader,
} from '~/routes/home.users._index/route';

const UserListPageStub = createRemixStub([
	{
		path: '/home/users',
		Component: UsersListPage,
		async loader({ request }) {
			return await loader({ request } as LoaderFunctionArgs);
		},
		async action({ request }) {
			return await action({ request } as ActionFunctionArgs);
		},
	},
]);

describe('User List Page', () => {
	describe('User Table', async () => {
		const { user } = customRender(
			<UserListPageStub initialEntries={['/home/users']} />,
		);
		...
	});
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

setup.ts を以下のように編集して実行したところ，"setup.ts" のみが表示されました．setup.ts 自体は実行されているが，beforeAll は実行されていないようです．

console.log('setup.ts')

beforeAll(() => {
	server.listen({
		onUnhandledRequest: 'error',
	});
	console.log('MSW server started.');
});

Genspark に beforeAll が実行されない例を尋ねてみると，beforeAll 内で例外を投げても無視されるという例は見つかりましたが，beforeAll 自体が実行されないという例は見つかりませんでした．

https://github.com/vitest-dev/vitest/issues/1213

補足

特になし