Chapter 7. Testing Vuex

 

This chapter covers

  • Adding Vuex to a project
  • Writing unit tests for Vuex store mutations, actions, and getters
  • Writing unit tests for a Vuex store instance
  • Writing unit tests for Vuex connected components

Vuex (a state-management library for Vue) is essential for large Vue apps. To become a Vue testing master, you should learn how to test Vuex effectively.

In this chapter, you’ll learn how to test a Vuex store and Vuex-connected components. To learn how to test Vuex, you’ll refactor the Hacker News application you’ve been working on to use Vuex.

Note

This chapter doesn’t go into detail about Vuex basics. If you don’t already understand how getters, actions, and mutations are used to create a store, you should read chapter 6, “Understanding Vuex.”

Currently the Hacker News app fetches and stores data locally inside a view component by calling an API method. You’re going to move this logic out into a Vuex store, so that other parts of the application can use the data.

In the first section of this chapter, I’ll give you a high-level overview of the store design. It’s important to think about the design of the store before you write any tests. After I’ve shown you the store design, you’ll create a bare-bones Vuex store and add it to the application.

7.1. Understanding the store design

7.2. Adding Vuex to the project

7.3. Testing Vuex store parts separately

7.4. Testing a Vuex store instance

7.5. Testing Vuex in components

Summary

Exercises

sitemap