Question

我一直在使用以下结构测试vuex商店

/src/store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  data: []
};

export const mutations = {
  SET_DATA(state, data) {
    state.data = data;
  }
};

export const actions = {
  fetchData({ commit }) {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => commit(SET_DATA, data))
      .catch(err => console.log(err));
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

我的动作测试文件为url断言并提交触发

it("should fetch correct data and commit to store", () => {
    // Mock fetch
    global.fetch = jest.fn().mockImplementationOnce(() =>
      Promise.resolve({
        status: 200,
        json: () => Promise.resolve(JSON.stringify(mockData))
      })
    );

    return store.dispatch("fetchData").then(() => {
      expect(global.fetch).toHaveBeenCalledWith(
        "https://jsonplaceholder.typicode.com/users"
      );
      expect(mockSetData).toHaveBeenCalled();
    });
  });

目前，我的测试仅通过了URL，并且没有调用mockSetData，这是一个开玩笑的模拟函数。

我是TDD的新手，不确定为什么会失败。 Here's an implementation on codesandbox for more context

用玩笑测试vuex模拟突变

0 个答案: