Frequently Asked Questions

Why is this called Vignet?

This library is called Vignet as a play on the word Vignette (for domain and naming purposes).

Vignette's are scenes that capture a moment in time rather than a full plot. Similarly, component tests represent specific scenes of a UX without a broader user flow.

Is Vignet a replacement for Storybook?

Vignet can be used as an alternative or a complement to Storybook, though we still believe Storybook is best for design systems given its maturity and robust feature set. However, for quickly rendering basic components and for full page components that already have Vitest tests utilizing mocks, we hope that Vignet would eventually be the simplest and best choice.

How is Vignet different from Vitest's browser mode?

Vignet's main purpose is to serve as a frontend workshop for visual inspection and collaboration, similar to Storybook. It's built on top of Vitest's browser mode functionality, and differs both in application (it's not meant to run assertions) and in its implementation. A couple of differences:

• Vitest browser mode runs all tests upon launch, whereas Vignet only runs the selected component test one at a time for workshop rendering purposes, silently ignoring all assertions.

• Rendering browser mode tests requires calling a framework-specific vitest browser render function. To run browser mode tests alongside jsdom tests you need use separate Vitest workspaces and typically separate jsdom and browser mode tests in separate files.

  Of course, there could be a day in the distant future where Vitest browser mode and Vignet overlap, but for now they are designed for different purposes.