Summary

Julia Evans explores how to write integration tests for Vue components that run directly in the browser, without using Node.js or any server-side JavaScript runtime. She uses QUnit as a lightweight test framework and creates a simple mountComponent helper to render Vue components in temporary DOM elements. The post walks through practical challenges like waiting for async rendering, filling out forms programmatically, and identifying elements for testing. She discovers that many testing pain points (like elements appearing before they're ready) point to genuine UX improvements. The approach aligns with her ongoing project of doing frontend development without Node, and she finds the experience genuinely enjoyable despite its rough edges.

Key Insight

You can write meaningful integration tests for Vue components directly in the browser without any build tools or Node.js, and the friction points you encounter often reveal genuine improvements to make in your application's UX.

Spicy Quotes (click to share)

• 6

  I just don't test my frontend code which doesn't feel great.

• 5

  I think we all learned a long time ago that putting random sleep() calls in your tests and hoping that the timings are right is slow and flaky and extremely frustrating.

• 6

  If there's an element in the DOM that isn't actually ready for the user to interact with, maybe I shouldn't be displaying it yet!

• 4

  Feels like there's a way to make the app more accessible and easier to test at the same time.

• 4

  My frontend projects always feel so fragile because they're untested, and maybe one day I'll have a test suite I'm confident in!

• 5

  I feel like I'm constantly learning how to do super basic tasks.

• 1

  I really had a blast doing this.

Tone

enthusiastic, exploratory, reflective