Vitest Example: Alpine.js with JSDOM

index.test.js

import { expect, test } from 'vitest'
import { Alpine } from 'alpinejs';
import { fireEvent, screen } from "@testing-library/dom";

test('testing alpinejs', () => {
    document.body.innerHTML = `<div x-data="{ open: true }">
    <button data-testid="button" @click.prevent="open = !open;">Expand</button>

    <span data-testid="content" x-show="open">
        Content...
    </span>
</div>`;

    Alpine.initTree(document.body);

    await fireEvent.click(screen.getByTestId('button'));
    await new Promise((resolve) => setTimeout(resolve, 30));

    expect(screen.getByTestId("content").style.display).toBe('none');
});