@remix-run/reactからエクスポートされているコンポーネントを含んだコンポーネントをテストする場合のTips
@testing-library/react
のrender
メソッドを使用してコンポーネントをテストするときに、その対象のコンポーネントが内部で@remix-run/react
パッケージから<Link />
コンポーネントや<Form />
コンポーネントをインポートしている場合に、次のようなエラーが発生した。
... Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. The above error occurred in the <Link> component: ... Error: useHref() may be used only in the context of a <Router> component.
テスト内でreact-router-dom
のBrowserRouter
を使ってラップしてみても解決しなかった。
しかし、色々調べていたら次のプルリクエストの内容がとても参考になった。
前提としてvitest
を使用しており、vitest.config.ts
内でsetupFiles
を次のように設定している。
// test/setup-test-env.tsx export default defineConfig({ ... test: { ... setupFiles: ["./test/setup-test-env.tsx"], }, ... });
私の場合はsetup-test-env.tsx
内で、@remix-run/react
をモックし、ファクトリ引数内でエラーの原因であると思われるコンポーネントやフックの偽バージョンを作成することによって解決することができた。
// test/setup-test-env.tsx vi.mock("@remix-run/react", () => { // mock whatever remix APIs you're using return { Form: (props: any) => <form {...props} />, Link: (props: any) => <a {...props} />, useLoaderData: vi.fn(), useLocation: vi.fn(() => ({ key: Math.random().toString(32).slice(2) })), }; });
わざわざsetup-test-env.tsx
内で書かなくても、各テストファイルの中で自由にモックしても良いかもしれない。