Testing Slots

What we want to test the most out of slots is where they end up in the component. For that, we can reuse the skills we learned in the chapter Test Styles and Structure.

Right now, most of the tests in MessageList.test.js will fail, so let’s remove them all (or comment them out), and focus on slot testing.

Slot Testing in Action

One thing we can do is to make sure that the Message components end up within a ul element with the class list-messages. In order to pass slots to the MessageList component, we can use the slots property of the options object of mount or shallowMount methods. So let’s create a beforeEach method with the following code: