Chapter 10. Testing Vue Router
This chapter covers
- Writing unit tests for components that use Vue Router properties
- Writing unit tests for the RouterLink component
- Using Vue Router properties in a Vuex store
Vue Router is the official client-side routing library. If you add client-side routing to a Vue application, you’ll use Vue Router. Therefore, you should learn how to test applications that use Vue Router.
To learn Vue Router testing techniques, you’ll work on the Hacker News application. So far, the Hacker News application renders a single feed. You’ll refactor the app to support multiple feeds and add pagination, so that users can navigate between pages of feed items.
Definition
Pagination is adding paged content. A Google search page is paginated; you can click through many different pages of results (although you probably never do!).
In chapter 9, you added a Vue Router setup to the application. The router matches any of the Hacker News feeds—/top, /new, /show, /ask, and /jobs—and adds the values to the $route.params object as type. The router also matches an optional page parameter. For example, the path /top/2 will match with a $route.params object of
{ type: 'top', page: '2' }
You can use these values to render different feeds and different pages of items. To add these features, you’ll learn how to test Vue Router instance properties, how to test RouterLink components, and how to access Vue Router properties in a store.