Visual testing is a way of testing. Unit testing covers only functional aspects. Many testing methods only cover functional aspects and tell you whether the HTML structure is correct. Visual testing will tell you about the components appearance. There are many tools like Puppeteer, playwright, Cypress. These apps are difficult to set up. Viteshot is a super-fast webpack alternative. Viteshot can take many screenshots of individual components in very less time. It can be done even if the codebase of the application is very large. It is also easy to set up.  You can use it with React, Solid, Svelte, Vue 3 and Preact. To install using NPM run the below lines of code.

# 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

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

You are ready to generate a screenshot using the following command.

# 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.