Testing Vue components in the browser

A hands-on exploration of testing Vue components directly in the browser without Node.js or any server-side JS runtime. Using QUnit as the test framework, the approach involves mounting Vue components into temporary DOM elements, resetting fixture data via a dev server endpoint, and polling the DOM with a custom waitFor() function to handle async network requests. Key challenges covered include waiting for async rendering, identifying the right DOM elements to wait on, dispatching events to simulate form input, and using Chrome's built-in code coverage tool. The post also reflects on potential improvements like using Testing Library or Vue Test Utils for form handling, and the open question of running browser-based tests in CI.

#javascript

#testing

#vuejs

May 02•9m read time•From jvns.ca

Table of contents

idea: just run the tests in the browser tab the test framework: QUnit step 1: set up the component for testing step 2: add some fixture data step 3: a basic test waiting for parts of the page to render figuring out the right thing to wait for is not straightforward adding some CSS classes to identify things (but is that right?)filling out forms is tricky test coverage this was so fun!