You will likely encounter situations when you need to manage the Vue components better if you build a large-scale SPA.
Multiple components of an application depend on the same state. Imagine that different actions from different components want to modify the same state. Vuex is a tool that allows us to preserve the state throughout the application.
This article will show you how to implement a Vuex module using TypeScript and then unit test it using Jest. You can find the vuex_ GitHub repository. Feel free to fork this code. Let’s get started.
What is Vuex?
Vuex is a library and state management pattern for Vue applications. It allows you to use central state management in your applications to help you take advantage of Flux-like architecture. The Vuex Store includes four core concepts.
State
Getters
Mutations
Take Action
The status object holds all the data you need in the store. It also contains all your application-level information. This serves as the single source of truth. Any data type can be used to define the state properties, such as a string, number or object.
Define getters is a way to create a derived status based on your store state. This includes filtering the collection or counting the items.
Mutations, on the other hand, are the only way to change the state. Mutations are always synchronous, and payloads can be optional. A mutation can be called via the commit (i.e., MUTATION_NAME) or payload. It is always recommended that mutations be called from actions.
Actions allow for asynchronous operations as well as the ability to commit mutations. Action handlers are provided with a context object which exposes the same set of methods and properties as the store instance.
You can use contextual. Getters or context. State for the state and perspective. Commit for mutations. You can use the action name or payload to call action handlers. They are also called from other actions in the store.
Do a Vuex Module
Your store may become too big as your application grows in size. Vuex makes it possible to divide the store into modules. Each module can have its state, getters and mutations.
For example, let’s create an application for managing a to-do list. First, create a new module for to-do operations, which is responsible for getting all the to-do items and updating the state as needed.
The module will be used for large-scale applications. Therefore, separating the mutation types, actions known as functions, and the implementation files makes more sense.
Start tests
The J est framework will be used for unit testing. Jest is a JavaScript-based testing framework that can easily be installed with any node-based package manager like Yarn or npm. Jest has a few benefits. Jest tests can run simultaneously, have code coverage built in, and support mocking, isolated, and snapshot testing.
Initialize the test by creating a new store, attaching Vuex Vue and registering it. Localize can be used to modify the scoped Vue constructor without affecting global Vue. Below is a code snippet that will initialize the store.
Test actions
The todos module contains the fetchTodos operation, retrieves data from REST APIs and updates the state with mutations. We can mock the REST API using a Jest function. Then we can validate that it is being called and that the state is being updated.
Testing getters
Getter functions return the state object. We have one getter function, finishedTodos. This should return to-do items that have been completed.
More great articles from LogRocket:
The Replay is a curated newsletter by LogRocket. Don’t miss it!
React’s use effect can optimize your application’s performance
Switch between multiple Node versions
How to animate React apps with AnimXYZ
Explore Tauri – A new framework to build binaries
Compare NestJS vs. Express.js
Find the most popular ORMs in the TypeScript landscape
Test mutations
We know that mutations are the only way to change the state. We can test the ON_FETCH_TODOS_SUCCESS mutation by sending mock todo tasks and validating whether the state is modified.
Below is the code for the success mutant. The same goes for the started, error, and success mutations.
Conclusion
This tutorial teaches you to use TypeScript and Jest to create and test a Vuex module. We learned about the four main concepts of a Vuex store: state, getters and mutations. Vuex’s central state management makes it easy to simplify your application and use Flux-like architecture.