在vue项目中，vuex是经常使用的一个插件，这个插件用来管理项目中的数据。那么在测试中又应该怎么测试vuex呢？接下来，就说一说测试vuex的方法。测试vuex的方法分为两种，一种是分别测试vuex的组成部分，一种是把vuex的store作为一个整体进行测试。

分别测试vuex的组成部分

vuex由mutations、actions、getters、state组成，第一种方法就是分别对这些部分进行测试。

测试mutation

一个mutation测试的最终断言始终是要检查一个state对象是否被正确更改，因为这是mutation的目的。你可以将更改后的state对象视为一个mutation的输出。如果你的mutation没有改变state对象，那就说明你没有正确地使用它们。

import mutation from '../mutations'
describe('mutation',()=>{test('setItems',()=>{const items = [{id:1},{id:2}];const state = {items:[]}mutations.setItems(state,{items});expect(state.items).toBe(items);});
});

测试getters

同mutation一样，Vuex getter也是普通的JavaScript函数。getter始终返回一个值，这样使要测试的内容变得简单化，你将始终断言getter函数的返回值。要测试getter，可以使用一个假的state对象调用getter函数，该state对象包含getter将使用的值，然后断言getter是否返回你期望的结果。

import getters from '../getters';describe('getters',()=>{test('displayItems',()=>{const items = Array(21).fill().map((v,i)=> i);// 构造一个假的stateconst state = {items}const result = getters.displayItems(state);const expectedResult = item.slice(0,20);expect(result).toEqual(expectedResult);});
});

测试action

action使你能够异步提交mutation。通常，action会进行API调用并提交结果。因为action可以是异步的，并且可以发送HTTP请求，所以同mutation或getter相比，为action编写单元测试要更复杂。

要测试action，我们需要按照Vuex调用它的方式调用该函数，并断言该action是否按你的期望执行。通常，这意味着要利用模拟避免产生HTTP调用。

我们可以使用jest.mock()方法模拟请求。

import actions from '../actions'
import {fetchListData}from '../../api/api'
import flushPromises from 'flush-promises'
jest.mock('../../api/api')
describe('actions',()=>{test('fetchListData',async ()=>{expect.assertions(1)const items= [{},{}]const type = 'top'fetchListData.mockImplentationOnce(calledWidth => {return calledWith === type ? Promise.resolve(items) : Promise.resolve();})const context = {commit:jest.fn()}actions.fetchListData(context,{type});await flushPromises();expect(context.commit).toHaveBeenCalledWith('setItems',{items});});
})

测试vuex store整体

这种方法是把vuex作为一个整体进行测试的方法。
要测试它，先在Vue构造函数上安装Vuex，再创建一个store并通过commit提交一个mutation。然后，你可以断言在提交mutation后state会发生变化。

import {cloneDeep} from 'lodash'
import {createLocalVue} from '@vue/test-utils'
import flushPromises from 'flush-promises';
import {createVuex} from 'vuex';
import {fetchListData} from '../../api/api'
jest.mock('../../api/api');
function createItems(){const arr = new Array(22);return arr.fill().map((item,i)=>{return {id:`${i}`,name:'item'}});
}
describe('store',()=>{test('fetchListData',async ()=>{expect.assertions(1);const items = createItems();// 通过克隆得到store配置对象，避免测试用例间的干扰const clonedStoreCofig(cloneDeep({}));const store = createStore(clonedStoreConfig);const type = 'top'fetchListData.mockImplementation(calledType => {return calledType === type ? Promise.resolve(items) :Promise.resolve();});store.dispatch('fetchListData',{type});await flushPromisses();expect(store.getters.displayItems).toEqual(items.slice(0,20));});
});

测试组件中的vuex

为了能够测试组件中的vuex是否正常工作，我们需要先创建一个vuex的实例并传递给组件。

import {shallowMount,createLocalVue} from '@vue/test-utils'
import {createStore}from 'vuex'
import flushPromises from 'flush-promises'
import itemList from '../ItemList.vue'
import Item from '../../components/Item.vue'
const localVue = createLocalVue();
localVue.use(Vuex)
describe('ItemList.vue',()=>{let storeOptions;let store;beforeEach(()=>{storeOptions = {getters:{displayItems:jest.fn()},actions:{fetchListData:jest.fn(()=>{return Promise.resolve()});}};store = createStore(storeOptions);});test('render Items',()=>{const $bar = {start:()=>{},finish:()=>{}}const items = [{},{},{}]storeOptions.getters.displayItems.mockReturnValue(items);const wrapper = shallowMount(ItemList,{mocks:{$bar},localVue,store});const Items = wrapper.findAll(Item)expect(Items).toHaveLength(items.length);Items.wrappers.forEach((wrapper,i)=>{expect(wrapper.vm.item).toBe(items[i]);})});
});

jest测试vuex相关推荐

使用Jest测试JavaScript (入门篇)
1 什么是 Jest? Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架. ...
jest测试ajax,ajax – 如何使用Jest来测试React呈现的异步数据？
我正在使用React for render和Jest / Jasmine进行测试.我使用旧的Jest / Jasmine等待测试并运行,但现在这些已经在Jasmine 2中消失了,我不知道如何用新的a ...
react jest测试_如何使用React测试库和Jest开始测试React应用
react jest测试 Testing is often seen as a tedious process. It's extra code you have to write, and in s ...
react jest测试_如何使用Jest和react-testing-library测试Socket.io-client应用程序
react jest测试 by Justice Mba 由Mba法官如何使用Jest和react-testing-library测试Socket.io-client应用程序 (How to test ...
react jest测试_如何设置Jest和Enzyme来测试React Native应用
react jest测试 by Sam Ollason 通过萨姆·奥拉森(Sam Ollason) This short article shares my experiences setting u ...
Jest测试语法系列之Expect
Methods Expect主要用于实现验证操作,Jest的Expect提供了如下的验证方法: expect(value) expect.extend(matchers) expect.anythin ...
使用Jest测试JavaScript (入门篇) 1
1 什么是 Jest? Jest Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的 ...
Jest测试框架学习(一)
前言 jest是针对JavaScript的测试框架.如果遵循TDD原则,在任何功能开发之前都需要先写测试.而测试分为单元测试,集成测试和系统测试. 单元测试单元测试可以理解为对于单个函数(单一功能) ...
Jest测试入门到使用
Jest 测试使用说明 Jest 测试什么是测试作为开发来讲可以简单把代码分为两种,一种是业务代码,一种是业务无关的代码.测试代码就是典型的业务无关的代码.不过按照我的定义可以把测试代码定位为:可 ...

jest测试vuex