内容简介：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，包含 state 、 mutations 、 getters 與 actions 。
第 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
通過 unit test 得到 綠燈 。
Conclusion
- Vuex 的 Mutation 本質是 function，且職責很確定，因此 unit test 非常好寫
- 由於 mutation 的職責只有修改 state，就是將 stub 傳進 mutation ，然後驗證 state 是不是等於 stub
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
微信民族志、自媒体时代的知识生产与文化实践
赵旭东 / 中国社会科学出版社 / 2017-9 / 98.00元
进入二十一世纪以来，随着网络技术的发展，自媒体的悄然登场深度影响着我们的日常生活。中国社会中自媒体通讯方式的普及以及随之而有的一种文化书写的新形式——微信民族志的出现使原有文化秩序中时空意义发生转变的同时，也在重新塑造着以研究异文化为己任的人类学学科自身的成长、转型与发展。在此种情境之下，由中国人民大学人类学研究所、中国人民大学国家发展与战略研究院、中国人民大学社会学理论与方法研究中心、《探索与争......一起来看看 《微信民族志、自媒体时代的知识生产与文化实践》 这本书的介绍吧!
