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

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

Vuex Unit Test：Mutation

通過 unit test 得到 綠燈 。

Conclusion

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

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

查看所有标签

猜你喜欢:

Vuex Unit Test：Mutation

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

码农书籍

The Filter Bubble

Eli Pariser / Penguin Press / 2011-5-12 / GBP 16.45

In December 2009, Google began customizing its search results for each user. Instead of giving you the most broadly popular result, Google now tries to predict what you are most likely to click on. Ac......一起来看看《The Filter Bubble》这本书的介绍吧!

码农工具