即使商店中的函数执行良好，Vuex 测试也会抛出错误

Posted 2023-02-22

【中文标题】即使商店中的函数执行良好，Vuex 测试也会抛出错误

【英文标题】：Vuex test with jest throw error even if the function in the store execute well

【发布时间】：2021-10-28 07:31:12

【问题描述】：

这个错误是怎么回事？

我检查了所有不同的方法来解决它，甚至在控制台中，我正在测试的函数也可以正常工作，通过突变从 false 传递到 true，

这是商店里的代码

该操作，这工作正常，调用 firebase，并正确记录用户。

 async login( commit , payload) 
  await auth.signInWithEmailAndPassword(payload.email, payload.password);

  commit("toggleAuth");
  window.location.reload();
,

login函数执行提交，然后输入toggleAuth突变

  toggleAuth() 
  this.state.userLoggedIn = !this.state.userLoggedIn;
,

所有这些都是这样测试的。

import  createStore  from "vuex";
import auth from "@/store/modules/auth.js";
import  cloneDeep  from "lodash";

jest.mock("@/includes/firebase.js", () => (
  auth: 
    signInWithEmailAndPassword: () => Promise.resolve(),
  ,
));

describe("Vuex store test", () => 
  test("toggleAuth mutations sets user logged in to true", () => 
    const clonedAuth = cloneDeep(auth);
    const store = createStore(
      modules:  auth: clonedAuth ,
    );
    expect(store.state.auth.userLoggedIn).not.toBe(true);
    store.commit("toggleAuth");
    expect(store.state.userLoggedIn).toBe(true);
  );

  test("login action sets usserlogged ", async () => 
    const clonedAuth = cloneDeep(auth);
    const store = createStore(
      modules:  auth: clonedAuth ,
    );
    expect(store.state.auth.userLoggedIn).toBe(false);
    await store.dispatch("login", 
      email: "[e-mail]",
      password: "123456",
    );
    expect(store.state.auth.userLoggedIn).toBe(true);
  );
);

【参考方案1】：

路由器或location 不应在测试中按原样使用，因为 Jest 使用假浏览器环境。应该在单元测试中模拟它们，因为它们会产生副作用。

该错误表示location.reload没有在JSDOM中实现，由于测试不在浏览器窗口中运行，因此无法以合理的方式实现。

应该是：

jest.spyOn(location, 'reload');
store.commit("toggleAuth");
expect(store.state.userLoggedIn).toBe(true);
expect(location.reload).toBeCalledTimes(1);

这应该与jest.restoreAllMocks 和jest.clearAllMocks 或它们的配置对应物一起使用。