Thoughts on React Server Components and Vitest Browser Mode

[pmk1c]

I really dig, that browser mode is now stable. I also dig React Server Components.

Thinking about these things, I thought, that for perfectly testing RSC, we'd need something in between Node and browser based tests. A typical RSC fetches data asynchronously and renders based on this data. Data fetching is done on the server (never in the browser), but the rendered component of course still get's displayed in the browser. So in a perfect world, I could test this component by rendering it in node, than render it in a browser env and check the output.

On the other hand: RSC's are unable to define client side interactions, so probably this is a non-issue and we should just unit test RSC components with Node as we always did, but unfortunately we won't be able to do visual regression testing without having a browser involved.

I just wanted to share this thought, and maybe start a discussion on how we should handle RSC unit tests as best practice.

[pmk1c]

Linking a very helpful discussions I found about this:

• Support for React Server Components testing-library/react-testing-library#1209

And there is some movement on this from the Storybook devs, that looks really promising:

• Support for React Server Components testing-library/react-testing-library#1209 (comment)
• https://github.com/storybookjs/vitest-plugin-rsc