RSCをServer Functionを悪用してテストする

React Server Components のテストは難しい

"use client"や"use server"ディレクティブの付いたモジュールや関数の解釈がクライアントとサーバーの間で異なるため

もう片方から読むとスタブが返ってくる

意味論の違いから SC から CC は呼び出せても CC から SC は呼べない

SC には rerender の概念がない

Server Functions は CC から呼べるし ReactNode を返せる

これを使えばいいのでは?

code:server.tsx

export function ServerComponent(props) { ... }

code:server.stub.tsx

"use server"

import { ServerComponent } from "./server"

export async function callServerComponent(props) {

return <ServerComponent {...props} />

}

code:server.test.tsx

import { render } from "@testing-library/react"

import { callServerComponent } from "./server.stub"

test("SC", async () => {

render(await callServerComponent({ ... }))

...

})

問題

テスト用の Server Function が露出しないようにする

テストをクライアントとサーバーどちらのコンテキストで動かすか選択できるようにする

vitest って Vite の Environment 選べるんだろか

テストで RSC を動かす

それなりに難しいはず