Testing & Debugging Alpine

Test components with Cypress/Playwright and debug in DevTools.

Testing Alpine.js Components

Alpine components are just DOM elements with special attributes, so they can be tested like any other part of your page. Tools like Cypress and Playwright work out of the box. You can also unit‑test plain functions extracted from Alpine.data() with Jest or Vitest.

Cypress Example

it('toggles the dropdown', () => {
  cy.visit('/')
  cy.get('button').click()
  cy.get('[x-show]').should('be.visible')
  cy.get('button').click()
  cy.get('[x-show]').should('not.be.visible')
})

Unit Testing Data Factories

Since Alpine.data() returns plain functions, you can import them and test them in isolation.

import { counter } from './components'

test('increments count', () => {
  const instance = counter()
  instance.increment()
  expect(instance.count).toBe(1)
})

Debugging Tips

• In DevTools, select an Alpine element and type $0.__x.$data to inspect its reactive state.
• Use Alpine.version to check the installed version.
• You can temporarily stop Alpine with Alpine.stop() for testing.
• Add x-effect="console.log($data)" temporarily to watch component state changes.