posva / vuex-mock-store

vuex-mock-store > Simple and straightforward mock for Vuex v3.x and v4.x (Vue 2 and 3) Automatically creates spies on and so you can focus on testing your component without executing your store code. **Help me keep working on Open Source in a sustainable way 🚀**. Help me with as little as \$1 a month, sponsor me on Github. Silver Sponsors Bronze Sponsors --- Installation Usage ℹ️: _All examples use Jest API_. See below to use a different mock library. Usage with vue-test-utils: Given a component : You can test interactions without relying on the behaviour of your actions and mutations: ⚠️ The mocked method returns instead of a Promise. If you rely on this, you will have to call the appropriate function to make the spy return a Promise: If you are using Jest, you can check the documentation here Initial state and getters You can provide a , and object to mock them: Modules State To mock module's , provide a nested object in with the same name of the module. As if you were writing the state yourself: That will cover the following calls: _When testing , it doesn't change anything for the module to be namespaced or not_ Getters To mock module's , provide the correct name based on whether the module is _namespaced_ or not. Given the following modules: We need to use the following getters: Actions/Mutations As with _getters_, testing actions and mutations depends whether your modules are namespaced or not. If they are namespaced, make sure to provide the full action/mutation name: _Refer to the module example below using for a more detailed example, even though it is using only , it's exactly the same for and _ Mutating , providing custom You can modify the and directly for any test. Calling will reset them to the initial values provided. API class • - : initial state object, _default_: • : getters object, _default_: • : interface to create spies. details below Store state. You can directly modify it to change state: Store getters. You can directly modify it to change a value: ℹ️ _Why no functions?_: if you provide a function to a getter, you're reimplementing it. During a test, you know the value, you should be able to provide it directly and be **completely sure** about the value that will be used in the component you are testing. Reset and spies and restore and to their initial values Providing custom spies By default, the Store will call to create the spies. This will throw an error if you are using or any other test framework that isn't Jest. In that situation, you will have to provide an interface to _create_ spies. This is the default interface that uses : The handler is an optional argument that mocks the implementation of the spy. If you use Jest, you don't need to do anything. If you are using something else like Sinon, you could provide this interface: & Spies. Dependent on the testing framework • jest.fn • sinon.spy Related • vue-test-utils • vuex License MIT