Highlights from the show
The first thing we worked out was: what to test? There’s a number of ways to do this, but we settled on a combination of interacting with the component and looking at its template. Since neither of us wrote this component, interacting with it in an org helped us understand just what the component was supposed to do! But to identify our test cases we looked at the template. For example:
Looking at this template, we identified two
if:true blocks which gave us logical test cases for when records is true, when records is false and when error is true. We also decided we needed a test demonstrating the
onloadmore handler being called.
We also quickly realized that we could execute our tests faster than Jest could update the testing DOM with components. This led us to utilize a Promise to ensure our DOM rendered any components before we asserted against them. Throughout the Jest test codebase you’ll often see code similar to this:
For our last test, we struggled with getting our test to fire the onloadmore event. About 5 minutes after the stream ended, we got Philippe Ozil on the phone and he sorted us out. Turns out Heather and I just need to write more Jest tests, because it was a simple naming convention tripping us up. We tried using this code:
This, sadly, doesn’t work. The naming convention for events prepends ‘on’ for event handlers, not the event names themselves. Simply removing ‘on’ from our custom event solved our testing problems! Remember to emit events without the ‘on’ prefix! For example:
These are just a few of the things we learned writing LWC tests in jest. We had a blast, and I highly recommend writing your own Jest tests to get a feel for how they work. Not sure where to get started? Well, there’s a ‘module for that!‘ The recently released Lightning Web Component Tests is an excellent place to start. You can also watch Heather and I with the on demand episode here.