Create `vitest-browser-rsc`

[hi-ogawa]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Description

Something like https://github.com/kunai-consulting/vitest-browser-qwik/ may or may not work.

Suggested solution

todo

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[kettanaito]

I like this but I strongly propose this was not separated from vitest-browser-react. RSC is a React's feature and the specifics of its rendering belong in the existinbg vitest-browser-react. In fact, if arranged properly, you will be reusing the existing render from that package for client-side hydration like I'm doing in https://github.com/kettanaito/vite-plugin-rsc-testing.

My plan was:

1. Build a prototype.
2. Gather feedback and complete a decent test coverage based on how people are using RSC in the wild.
3. Open a PR to vitest-browser-react to add renderAsync as a designated method to render RSC.
4. Publish an official @vitejs/plugin-rsc-testing plugin that combines an optional @vitejs/plugin-rsc for react-server environment and all the plugins that make vite-plugin-rsc-testing work at the moment (import transformer and the HTTP middleware for processing RSC requests from the browser's createFromFetch).

Here's the DX I want:

import { it, expect } from 'vitest'
import { page } from 'vitest/browser'
import { renderAsync } from 'vitest-browser-react'
import Homepage from './suspense'

it('renders the list of pokemon', async () => {
  await renderAsync(<Homepage />)
  await expect
    .element(page.getByRole('list').getByRole('listitem'))
    .toHaveLength(3)
})

This is what's currently working in my probably a bit native approach.