Vuex Unit Test:Mutation

栏目: 编程语言 · 发布时间: 6年前

内容简介:Vuex 分成 State、Mutation、Getter 與 Action 四部分,由於都是圍繞在 Data,因此都是針對 Data 做測試。本文討論 Mutation 的 Unit Test。Vue 2.5.22

Vuex 分成 State、Mutation、Getter 與 Action 四部分,由於都是圍繞在 Data,因此都是針對 Data 做測試。

本文討論 Mutation 的 Unit Test。

Version

Vue 2.5.22

Vuex 3.0.1

Vue-test-utils 1.0.0-beta.20

Store

books-info.js

import { fetchBooks } from '@/api/books';

/** 寫入所有書籍 */
const setBooks = (state, { books }) => state.books = books;

/** 載入所有書籍 */
const saveBooks = commit => ({ data }) => commit('setBooks', data);
const loadBooks = ({ commit }) => fetchBooks().then(saveBooks(commit));

/** 書籍筆數 */
const booksCount = ({ books }) => books.length;

export default {
  namespaced: true,
  state: { books: [] },
  mutations: { setBooks },
  getters: { booksCount },
  actions: { loadBooks },
};

一個典型的 Vuex store,包含 statemutationsgettersactions

第 3 行

/** 寫入所有書籍 */
const setBooks = (state, { books }) => state.books = books;

setBooks() 為典型的 mutation ,將 payload 寫入 state,該如何對這行 code 做 unit test 呢 ?

Unit Test

mutation.spec.js

import store from '@/store/modules/books-info';

test('setBooks() mutation', () => {
  /** arrange */
  const stub = [1, 2, 3];
  const state = { books: [] };

  /** act */
  store.mutations.setBooks(state, { books: stub });

  /** assert */
  expect(state.books).toBe(stub);
});

第 1 行

import store from '@/store/modules/books-info';

將要測試的 store import 進來。

第 3 行

test('setBooks() mutation', () => {
  /** arrange */
  
  /** act */
    
  /** assert */
}

所有的 unit test 都包在 test() 的第二個參數,以 Arrow Function 表示。

test() 的第一個參數為 description,可描述 test case。

一樣使用 3A 原則寫 unit test。

第 4 行

/** arrange */
const stub = [1, 2, 3];
const state = { books: [] };

要測試 mutation,有兩個原則:

books
const stub = [1, 2, 3];

建立要測試的 stub。

const state = { books: [] };

建立 fake state object。

第 8 行

/** act */
store.mutations.setBooks(state, { books: stub });

實際執行 setBooks mutation,並傳入剛剛在 arrange 建立的 fake state 與 stub。

因為 setBooks mutation 的 payload 為 object,所以 unit test 時也要傳入 object

11 行

/** assert */
expect(state.books).toBe(stub);

實際讀取 books state,驗證是否等於 stub。

$ yarn test:unit

Vuex Unit Test:Mutation

通過 unit test 得到 綠燈

Conclusion

  • Vuex 的 Mutation 本質是 function,且職責很確定,因此 unit test 非常好寫
  • 由於 mutation 的職責只有修改 state,就是將 stub 傳進 mutation ,然後驗證 state 是不是等於 stub

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

一网打尽

一网打尽

[美]布拉德·斯通 / 李晶、李静 / 中信出版社 / 2014-1-15 / 49.00元

亚马逊最早起步于通过邮购来经营图书业务。但贝佐斯却不满足于仅做一名书商,他希望缔造亚马逊万货商店的神话——能提供海量的货源,并以超低的价格提供最具吸引力的便捷服务。为了实现这一诺言,他发展了一种企业文化,这种文化蕴含着执着的雄心与难以破解 的秘诀。亚马逊的这 一文化现在依旧在发扬光大。 布拉德·斯通非常幸运地得到采访亚马逊的前任和现任高管、员工以及贝佐斯本人、家人的机会,使我们第一次有机会深......一起来看看 《一网打尽》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具