Quickstart

VistaJS testing is powered by modern tools like Vitest and DOM Testing Library, allowing you to easliy test your components.

import { signal } from 'vistajs/core';
import { Component, html, render } from 'vistajs/dom';

import { screen, waitFor } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';

describe('Counter component', () => {

  it('should update template when bounded signal gets updated', async () => {
    const counterComponent = Component<Prop>(`app-counter`, () => {
      const counter = signal(0);

      const handleCounter = () => {
        counter.set(counter() + 1);
      };
      return () => html`
        <p>${counter()}</p>
        <button onclick=${handleCounter}>Increment</button>
      `;
    });

    render(document.body, counterComponent);

    const button = await screen.findByRole('button', {
      name: /Increment/i,
    });

    await userEvent.click(button);

    await waitFor(() => {
      const updatedText = screen.getByText('1');
      expect(updatedText).toBeInTheDocument();
    });
  })

That way, you can test:

• Components

• Routes