Testing Vue components in the ... Note
Julia Evans

Testing Vue components in the browser

The author aims to write frontend JavaScript without relying on Node.js. A significant challenge encountered is the lack of effective testing methods for frontend code. Previous attempts with Playwright were deemed slow and required Node.js. To address this, the author explored running tests directly within the browser tab, inspired by Alex Chan's work on a minimalist in-browser unit testing framework. While Chan's approach focused on unit tests, the author sought to perform end-to-end integration tests for Vue components without a Node.js build process.The author used QUnit as the testing framework, appreciating its "rerun test" button for debugging. The process involved setting up Vue components by exposing them globally and creating a mountComponent function to render them in an invisible, off-page div. Fixture data was managed by resetting the database via a POST request to a dedicated endpoint. A basic test then rendered a component and asserted its content.Key issues encountered included waiting for asynchronous operations to complete, leading to the development of a waitFor() function. Identifying the correct element or condition to wait for proved challenging, prompting suggestions for refactoring the application for better reliability. The author also experimented with adding CSS classes for element identification, noting that libraries like Testing Library recommend more accessible approaches.Form handling presented difficulties as simply setting values wasn't sufficient; relevant DOM events needed to be dispatched. This highlighted why UI testing libraries might simplify such tasks. Test coverage was partially assessed using Chrome's built-in developer tools, although the process required specific configurations and actions to work with bundled JavaScript.Despite the learning curve, the author found the experience enjoyable and expressed optimism about building a confident test suite for their frontend projects. They are also considering further exploration of libraries like Testing Library, which offers a UMD build compatible with browser-only execution, and pondering how to integrate browser-primarily tests into CI environments.