内容简介：Vuex 分成 State、Mutation、Getter 與 Action 四部分，由於都是圍繞在 Data，因此都是針對 Data 做測試。本文討論 Getter 的 Unit Test。Vue 2.5.22
Vuex 分成 State、Mutation、Getter 與 Action 四部分，由於都是圍繞在 Data，因此都是針對 Data 做測試。
本文討論 Getter 的 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';
/** mutation */
const setBooks = (state, { books }) => state.books = books;
/** action */
const saveBooks = commit => ({ data }) => commit('setBooks', data);
const loadBooks = ({ commit }) => fetchBooks().then(saveBooks(commit));
/** getter */
const booksCount = ({ books }) => books.length;
export default {
namespaced: true,
state: { books: [] },
mutations: { setBooks },
getters: { booksCount },
actions: { loadBooks },
};
一個典型的 Vuex store，包含 state 、 mutations 、 getters 與 actions 。
10 行
/** getter */
const booksCount = ({ books }) => books.length;
booksCount() 為典型的 getter，將 books state 的 length property 傳回。
Unit Test
getter.spec.js
import store from '@/store/modules/books-info';
test('booksCount() getter', () => {
/** arrange */
const stub = [1, 2, 3];
const state = { books: stub };
/** act */
const result = store.getters.booksCount(state);
/** assert */
expect(result).toBe(3);
});
第 1 行
import store from '@/store/modules/books-info';
將要測試的 store import 進來。
第 3 行
test('booksCount() getter', () => {
/** 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: stub };
要測試 getter，有兩個原則：
books
const stub = [1, 2, 3];
建立要測試的 stub。
const state = { books: stub };
建立 fake state object，並以 stub 建立 state 的初始值。
第 8 行
/** act */ const result = store.getters.booksCount(state);
實際執行 booksCount() getter，變傳入剛在 arrange 建立的 fake state。
將 bookCount() getter 結果存於 result 。
11 行
/** assert */ expect(result).toBe(3);
驗證 result 是否等於預期結果。
$ yarn test:unit
通過 unit test 得到 綠燈 。
Conclusion
- Vuex 的 Getter 本質是 function，且職責很確定，因此 unit test 非常好寫
- 由於 getter 的職責只有讀取 state，測試手法就是提供 stub 並透過 fake state object 建立 state 初始值，然後執行 getter 並驗證結果是否如預期
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
企业应用架构模式
Martin Fowler、王怀民、周斌 / 王怀民、周斌 / 机械工业出版社 / 2004-7 / 49.00元
本书作者是当今面向对象软件开发的权威，他在一组专家级合作者的帮助下，将40多种经常出现的解决方案转化成模式，最终写成这本能够应用于任何一种企业应用平台的、关于解决方案的、不可或缺的手册。本书获得了2003年度美国软件开发杂志图书类的生产效率奖和读者选择奖。本书分为两大部分。第一部分是关于如何开发企业应用的简单介绍。第二部分是本书的主体，是关于模式的详细参考手册，每个模式都给出使用方法和实现信息，并一起来看看 《企业应用架构模式》 这本书的介绍吧!
