Viteshot

Web development is a predominantly visual endeavour. Aside from being functional, a website has to look right.

Testing has become a must-have, especially in teams of developers. While unit testing of components is ubiquitous, it only covers the functional aspects. For example, Jest snapshot tests only tell you that the generated HTML structure is correct. They tell you nothing about a component's appearance.

Visual testing fills this gap, but it can be a complex endeavour. You can either spin up your app server and take screen-level screenshots with Cypress, Puppeteer or Playwright, or you can use Storybook in combination with Storycap or Chromatic to generate screenshots of individual components and ensure they don't change unexpectedly. These approaches require significant effort to setup. If you use Storybook, you'll also notice increasing build times as your project gets larger.

This is where Viteshot comes in. Based on Vite, a super-fast webpack alternative, it can take hundreds of screenshots of individual components in a few seconds, even in a large codebase. It also requires minimal setup, so you can get on with your work.

Viteshot is a fast and simple component screenshot tool based on Vite.

It supports Preact, React, Solid, Svelte and Vue 3.

View Documentation View Github

Installation


# Install Viteshot.
npm install --save-dev viteshot # NPM
yarn add -D viteshot # Yarn
pnpm add -D viteshot # PNPM

# Set up Viteshot configuration in your repository.
viteshot init

Examples

All you need is to export UI components from files with the .screenshot.jsx/tsx/vue/svelte extension.

See examples:

Then, generate screenshots with:

# Take screenshots.
viteshot
> Capturing: src/__screenshots__/darwin/pixel2/App-App.png
> Capturing: src/__screenshots__/darwin/laptop/App-App.png
> Capturing: src/__screenshots__/darwin/pixel2/App-Clicked.png
> Capturing: src/__screenshots__/darwin/laptop/App-Clicked.png
> Capturing: src/__screenshots__/darwin/pixel2/App-Greet.png
> Capturing: src/__screenshots__/darwin/laptop/App-Greet.png
> Capturing: src/__screenshots__/darwin/laptop/App-HelloWorld.png
> Capturing: src/__screenshots__/darwin/pixel2/App-HelloWorld.png
> All done.

License

MIT