🙅 Firing up your whole E2E setup just to test React Server Components (RSCs) 🙌 Component testing RSCs in the browser, with mocked complex app states and reliable speed Check our newest blog post, or read on for the highlights. storybook.js.org/blog/compone... - ThreadSky

storybook.js.org • 86 days ago

🙅 Firing up your whole E2E setup just to test React Server Components (RSCs)

🙌 Component testing RSCs in the browser, with mocked complex app states and reliable speed

Check our newest blog post, or read on for the highlights.

https://storybook.js.org/blog/component-testing-rscs/

Comments

storybook.js.org•86 days ago

RSCs run in both frontend & backend environments, which makes them fast to render, but traditional testing difficult-to-impossible. Until now, the industry has largely resorted to E2E testing for RSCs. But they’re just components, so we made it possible to Component Test them.

storybook.js.org•86 days ago

Remember, Component Tests:

- Render a component in the browser for high fidelity
- Simulate a user interacting with UI, like an E2E test
- Only test a single UI component and can reach into the implementation to mock or manipulate deps, like a unit test

storybook.js.org•86 days ago

So how does it work?

With Node’s subpath imports, you can load the real backend module in your app and a browser-capable (typesafe!) mocked implementation in your stories (tests). These tests are isolated from others, making parallelization—tricky in an E2E environment—trivial.

storybook.js.org•86 days ago

This mocking strategy means dealing with authentication is a snap. Here, we just set the auth cookie and we’re done:

storybook.js.org•86 days ago

We can also use the in-memory database to mock application states. Such as here, where the first story has two mocked notes and the second story has none.

storybook.js.org•86 days ago

We can use these techniques together to fully test the RSC’s behavior and functionality. We authenticate by setting the cookie, and any database actions use the mocked module. We simulate user interaction with the excellent Testing Library's API and make assertions with
@vitest.dev.

Comments

Posting Rules

Reply