如何测试vuex插件store.subscribe

Question

我正在用玩笑来测试vue应用程序，我怀疑如何测试插件代码。 这是我要测试的代码：

export const persistPlugin = store => {
  store.subscribe(async (mutation, state) => {
    // filter all keys that start with `__`
    const _state = omitPrivate(state);
    const storedState = await storage.get('state');
    if (isEqual(_state, storedState)) return;
    storage.set(store, 'state', _state);
  });
};

我store.subscribe是store.subscribe部分。 store是作为插件方法的参数传递的，但是我不知道如何从测试中调用此方法是触发插件功能块的方法。

Answer 1

您可以为此使用testPlugin帮助程序。 这是一个可以适应状态验证的示例。 我更喜欢跟踪突变，而不是直接更改状态：

import { persistPlugin } from "@/store";

export const testPlugin = (plugin, state, expectedMutations, done) => {
  let count = 1;

  // mock commit
  const commit = (type, payload) => {
    const mutation = expectedMutations[count];

    try {
      expect(type).toEqual(mutation.type);
      if (payload) {
        expect(payload).toEqual(mutation.payload);
      }
    } catch (error) {
      done(error);
    }

    count++;
    if (count >= expectedMutations.length) {
      done();
    }
  };

  // call the action with mocked store and arguments
  plugin({
    commit,
    state,
    subscribe: cb =>
      cb(expectedMutations[count - 1], expectedMutations[count - 1].payload)
  });

  // check if no mutations should have been dispatched
  if (expectedMutations.length === 1) {
    expect(count).toEqual(1);
    done();
  }
};


describe("plugins", () => {
  it("commits mutations for some cases", done => {
    testPlugin(
      persistPlugin,
      { resume: { firstName: "Old Name" } },
      [{ type: "updateResume", payload: { firstName: "New Name" } }], // This is mutation which we pass to plugin, this is payload for plugin handler
      [{ type: "updateResume", payload: { firstName: "New Name" } }], // This is mutation we expects plugin will commit
      done
    );
  });
});