Unlocking the Power of Visual Debugging with Vitest Preview

Why Visual Debugging Matters

Visual debugging is essential for several reasons:

• Pinpoint errors: Visual debugging helps you identify the source of errors and bugs in your code, saving you time and effort when trying to fix problems.
• Understand code behavior: By seeing how your code interacts with other parts of the system, you gain valuable insights into its behavior.
• Optimize performance: Visual debugging helps you identify potential performance issues in your code, allowing you to optimize it for better performance.

Introducing Vitest

Vitest is a new unit testing framework built for speed. Its creator, Anthony Fu, highlights its key benefit: “Just like how Vite works in the browser, Vitest also knows the graph of your modules, which makes it able to do smart detection and only re-run the related tests.”

What is Vitest Preview?

Vitest Preview is a tool that allows you to visualize your tests in a browser. Developed by Hung Viet Nguyen, it’s designed to work seamlessly with Vitest. With Vitest Preview, you can write and debug tests faster, making it an essential tool for any developer.

Setting Up Vitest Preview

To get started with Vitest Preview, you’ll need to clone an existing GitHub repository and install the necessary dependencies. You can then use npm-run-all to run Vitest Preview and Vitest in parallel.

git clone https://github.com/your-repo/vitest-preview.git
cd vitest-preview
npm install
npm-run-all --parallel vitest vitest-preview

Creating Your Own Project

To create your own project from scratch, use Vite to scaffold the project and install the necessary dependencies, including Vitest and vitest-preview. You can then add npm-run-all to your package.json file for convenience.

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "test": "vitest",
    "test:preview": "vitest-preview",
    "test:all": "npm-run-all --parallel test test:preview"
  },
  "devDependencies": {
    "vite": "^3.0.0",
    "vitest": "^0.20.0",
    "vitest-preview": "^0.10.0",
    "npm-run-all": "^4.1.5"
  }
}

Addressing Errors

One common issue when setting up a new project with Vitest Preview is an error related to the canvas dependency. Installing the canvas dependency often resolves the issue.

npm install canvas

Visual Debugging with Vitest Preview

With Vitest Preview set up, you can write a simple test to simulate button clicks and verify that the count has been incremented correctly. The debug function in the code is where Vitest Preview gets called, allowing you to preview the test in the browser.

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/vue';
import Counter from './Counter.vue';

describe('Counter', () => {
  it('increments count on button click', async () => {
    const wrapper = render(Counter);
    const button = wrapper.getByRole('button');
    await button.click();
    expect(wrapper.getByText('Count: 1')).toBeInTheDocument();
  });
});

Creating a Second Test

Let’s create another test for a component that has two form inputs that accept numbers and return the sum of the numbers when a user submits the form. With Vitest Preview, you can preview the test in the browser and see the results in real-time.

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/vue';
import SumForm from './SumForm.vue';

describe('SumForm', () => {
  it('returns sum of numbers on submit', async () => {
    const wrapper = render(SumForm);
    const input1 = wrapper.getByLabel('Number 1');
    const input2 = wrapper.getByLabel('Number 2');
    const submitButton = wrapper.getByRole('button');
    await input1.setValue('2');
    await input2.setValue('3');
    await submitButton.click();
    expect(wrapper.getByText('Sum: 5')).toBeInTheDocument();
  });
});

The Power of Vitest Preview

Vitest Preview is a valuable visual testing and debugging tool that allows you to get real-time feedback on your tests. It simulates how your users will interact with your application, making it an essential tool for any developer. With Vitest Preview, you can build more robust and reliable applications, and ensure that your users have a seamless experience.

By leveraging the power of visual debugging with Vitest Preview, you can take your development skills to the next level and build better digital experiences.