I’ve recently started using JSDOM for testing my client-side code. While I’ve been very impressed with how simple it is to set up, and how fast it is, there has been one major obstacle which I didn’t see documented anywhere else: it doesn’t actually lay out the HTML elements.

In other words, JSDOM supports creating the in-memory structure of the web page, even running JavaScript code and altering CSS attributes. However, it doesn’t actually assign the height, width, or other such attributes to the elements. They are perpetually all zero.

Despite this, you can do a lot of rigorous testing, and in a way which is completely identical to how your might set up server-side tests. In fact, I use exactly the same project & test set-up for testing both my regular Node.js modules as I do for the client-side ones. All you need is a little bit of pre-test set-up code to construct the JSDOM window and load a test page, and you’re ready to go.

However, if you want to write tests which verify the layout of things, you’ll need to use another solution.