{"id":16439155,"url":"https://github.com/posva/vuex-mock-store","last_synced_at":"2025-05-14T08:08:27.096Z","repository":{"id":33009937,"uuid":"149036059","full_name":"posva/vuex-mock-store","owner":"posva","description":"✅Simple and straightforward Vuex Store mock for vue-test-utils","archived":false,"fork":false,"pushed_at":"2025-04-18T18:40:24.000Z","size":1041,"stargazers_count":272,"open_issues_count":4,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T07:03:54.967Z","etag":null,"topics":["jest","mock","sinon","store","test","vue","vuex"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posva.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"posva"}},"created_at":"2018-09-16T21:07:22.000Z","updated_at":"2025-02-24T12:25:03.000Z","dependencies_parsed_at":"2023-01-14T23:15:24.560Z","dependency_job_id":"8a252ffe-16c1-4509-b462-62c91053f626","html_url":"https://github.com/posva/vuex-mock-store","commit_stats":{"total_commits":284,"total_committers":13,"mean_commits":"21.846153846153847","dds":0.5387323943661972,"last_synced_commit":"0cb5128757a3bd3ea1643a45b280e0c33a33eeaf"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvuex-mock-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvuex-mock-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvuex-mock-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Fvuex-mock-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/vuex-mock-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101558,"owners_count":22014908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","mock","sinon","store","test","vue","vuex"],"created_at":"2024-10-11T09:08:14.089Z","updated_at":"2025-05-14T08:08:22.088Z","avatar_url":"https://github.com/posva.png","language":"JavaScript","funding_links":["https://github.com/sponsors/posva"],"categories":["JavaScript"],"sub_categories":[],"readme":"# vuex-mock-store [![Build Status](https://badgen.net/circleci/github/posva/vuex-mock-store)](https://circleci.com/gh/posva/vuex-mock-store) [![npm package](https://badgen.net/npm/v/vuex-mock-store)](https://www.npmjs.com/package/vuex-mock-store) [![coverage](https://badgen.net/codecov/c/github/posva/vuex-mock-store)](https://codecov.io/github/posva/vuex-mock-store) [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://github.com/posva/thanks)\n\n\u003e Simple and straightforward mock for Vuex v3.x and v4.x (Vue 2 and 3)\n\nAutomatically creates spies on `commit` and `dispatch` so you can focus on testing your component without executing your store code.\n\n**Help me keep working on Open Source in a sustainable way 🚀**. Help me with as little as \\$1 a month, [sponsor me on Github](https://github.com/sponsors/posva).\n\n\u003ch3 align=\"center\"\u003eSilver Sponsors\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.vuemastery.com\" title=\"Vue Mastery\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://www.vuemastery.com/images/lgo-vuemastery.svg\" alt=\"Vue Mastery logo\" height=\"48px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vuetifyjs.com\" target=\"_blank\" title=\"Vuetify\"\u003e\n    \u003cimg src=\"https://vuejs.org/images/vuetify.png\" alt=\"Vuetify logo\" height=\"48px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eBronze Sponsors\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.storyblok.com\" target=\"_blank\" title=\"Storyblok\"\u003e\n    \u003cimg src=\"https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png\" alt=\"Storyblok logo\" height=\"32px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Installation\n\n```sh\nnpm install -D vuex-mock-store\n# with yarn\nyarn add -D vuex-mock-store\n```\n\n## Usage\n\nℹ️: _All examples use [Jest](https://jestjs.io) API_. See [below](#providing-custom-spies) to use a different mock library.\n\nUsage with [vue-test-utils](https://github.com/vuejs/vue-test-utils):\n\nGiven a component `MyComponent.vue`:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cp class=\"count\"\u003e{{ count }}\u003c/p\u003e\n    \u003cp class=\"doubleCount\"\u003e{{ doubleCount }}\u003c/p\u003e\n    \u003cbutton class=\"increment\" @click=\"increment\"\u003e+\u003c/button\u003e\n    \u003cbutton class=\"decrement\" @click=\"decrement\"\u003e-\u003c/button\u003e\n    \u003chr /\u003e\n    \u003cbutton class=\"save\" @click=\"save({ count })\"\u003eSave\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { mapState, mapGetters, mapActions, mapMutations } from 'vuex'\n\nexport default {\n  computed: {\n    ...mapState(['count']),\n    ...mapGetters(['doubleCount']),\n  },\n  methods: {\n    ...mapMutations(['increment', 'decrement']),\n    ...mapActions(['save']),\n  },\n}\n\u003c/script\u003e\n```\n\nYou can test interactions without relying on the behaviour of your actions and mutations:\n\n```js\nimport { Store } from 'vuex-mock-store'\nimport { mount } from '@vue/test-utils'\nimport MyComponent from '@/components/MyComponent.vue'\n\n// create the Store mock\nconst store = new Store({\n  state: { count: 0 },\n  getters: { doubleCount: 0 },\n})\n// add other mocks here so they are accessible in every component\nconst mocks = {\n  global: { $store: store },\n  // for Vue 2.x: just { $store: store } without global\n}\n\n// reset spies, initial state and getters\nafterEach(() =\u003e store.reset())\n\ndescribe('MyComponent.vue', () =\u003e {\n  let wrapper\n  beforeEach(() =\u003e {\n    wrapper = mount(MyComponent, { mocks })\n  })\n\n  it('calls increment', () =\u003e {\n    wrapper.find('button.increment').trigger('click')\n    expect(store.commit).toHaveBeenCalledOnce()\n    expect(store.commit).toHaveBeenCalledWith('increment')\n  })\n\n  it('dispatch save with count', () =\u003e {\n    wrapper.find('button.save').trigger('click')\n    expect(store.dispatch).toHaveBeenCalledOnce()\n    expect(store.dispatch).toHaveBeenCalledWith('save', { count: 0 })\n  })\n})\n```\n\n⚠️ The mocked `dispatch` method returns `undefined` instead of a Promise. If you rely on this, you will have to call the appropriate function to make the `dispatch` spy return a Promise:\n\n```js\nstore.dispatch.mockReturnValue(Promise.resolve(42))\n```\n\nIf you are using Jest, you can check the documentation [here](https://jestjs.io/docs/en/mock-function-api#mockfnmockreturnvaluevalue)\n\n### Initial state and getters\n\nYou can provide a `getters`, and `state` object to mock them:\n\n```js\nconst store = new Store({\n  getters: {\n    name: 'Eduardo',\n  },\n  state: {\n    counter: 0,\n  },\n})\n```\n\n### Modules\n\n#### State\n\nTo mock module's `state`, provide a nested object in `state` with the same name of the module. As if you were writing the state yourself:\n\n```js\nnew Store({\n  state: {\n    value: 'from root',\n    moduleA: {\n      value: 'from A',\n      moduleC: {\n        value: 'from A/C',\n      },\n    },\n    moduleB: {\n      value: 'from B',\n    },\n  },\n})\n```\n\nThat will cover the following calls:\n\n```js\nimport { mapState } from 'vuex'\n\nmapState(['value']) // from root\nmapState('moduleA', ['value']) // from A\nmapState('moduleB', ['value']) // from B\nmapState('moduleA/moduleC', ['value']) // from C\n```\n\n_When testing `state`, it doesn't change anything for the module to be namespaced or not_\n\n#### Getters\n\nTo mock module's `getters`, provide the correct name based on whether the module is _namespaced_ or not. Given the following modules:\n\n```js\nconst moduleA = {\n  namespaced: true,\n\n  getters: {\n    getter: () =\u003e 'from A',\n  },\n\n  // nested modules\n  modules: {\n    moduleC: {\n      namespaced: true,\n      getter: () =\u003e 'from A/C',\n    },\n    moduleD: {\n      // not namespaced!\n      getter: () =\u003e 'from A/D',\n    },\n  },\n}\n\nconst moduleB = {\n  // not namespaced\n  getters: {\n    getter: () =\u003e 'from B',\n  },\n}\n\nnew Vuex.Store({ modules: { moduleA, moduleC } })\n```\n\nWe need to use the following getters:\n\n```js\nnew Store({\n  getters: {\n    getter: 'from root',\n    'moduleA/getter': 'from A',\n    'moduleA/moduleC/getter': 'from A/C',\n    'moduleA/getter': 'from A/D', // moduleD isn't namespaced\n    'moduleB/getter': 'from B',\n  },\n})\n```\n\n#### Actions/Mutations\n\nAs with _getters_, testing actions and mutations depends whether your [modules are namespaced](https://vuex.vuejs.org/guide/modules.html#namespacing) or not. If they are namespaced, make sure to provide the full action/mutation name:\n\n```js\n// namespaced module\nexpect(store.commit).toHaveBeenCalledWith('moduleA/setValue')\nexpect(store.dispatch).toHaveBeenCalledWith('moduleA/postValue')\n// non-namespaced, but could be inside of a module\nexpect(store.commit).toHaveBeenCalledWith('setValue')\nexpect(store.dispatch).toHaveBeenCalledWith('postValue')\n```\n\n_Refer to the module example below using `getters` for a more detailed example, even though it is using only `getters`, it's exactly the same for `actions` and `mutations`_\n\n### Mutating `state`, providing custom `getters`\n\nYou can [modify](#state) the `state` and `getters` directly for any test. Calling [`store.reset()`](#reset) will reset them to the initial values provided.\n\n## API\n\n### `Store` class\n\n#### `constructor(options)`\n\n- `options`\n  - `state`: initial state object, _default_: `{}`\n  - `getters`: getters object, _default_: `{}`\n  - `spy`: interface to create spies. [details below](#providing-custom-spies)\n\n#### `state`\n\nStore state. You can directly modify it to change state:\n\n```js\nstore.state.name = 'Jeff'\n```\n\n#### `getters`\n\nStore getters. You can directly modify it to change a value:\n\n```js\nstore.getters.upperCaseName = 'JEFF'\n```\n\nℹ️ _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.\n\n#### `reset`\n\nReset `commit` and `dispatch` spies and restore `getters` and `state` to their initial values\n\n#### Providing custom spies\n\nBy default, the Store will call `jest.fn()` to create the spies. This will throw an error if you are using `mocha` 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 `jest.fn()`:\n\n```js\nnew Store({\n  spy: {\n    create: (handler) =\u003e jest.fn(handler),\n  },\n})\n```\n\nThe handler is an optional argument that mocks the implementation of the spy.\n\nIf you use Jest, you don't need to do anything.\nIf you are using something else like [Sinon](https://sinonjs.org), you could provide this interface:\n\n```js\nimport sinon from 'sinon'\n\nnew Store({\n  spy: {\n    create: (handler) =\u003e sinon.spy(handler),\n  },\n})\n```\n\n### `commit` \u0026 `dispatch`\n\nSpies. Dependent on the testing framework\n\n- [jest.fn](https://jestjs.io/docs/en/jest-object#jestfnimplementation)\n- [sinon.spy](https://sinonjs.org/releases/v6.3.4/spies)\n\n## Related\n\n- [vue-test-utils](https://github.com/vuejs/vue-test-utils)\n- [vuex](https://github.com/vuejs/vuex)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvuex-mock-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Fvuex-mock-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Fvuex-mock-store/lists"}