使用jest单元测试

今天写代码碰到一处逻辑判断，突然想起来使用单元测试把所有可能的结果跑一遍，全方位打击，那一定不会再出bug了吧！

逻辑复现

我的逻辑很简单，是前端路由守卫，判断用户有没有登录，且这个路由需不需要登录才能访问，代码如下：

import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/user";
import { Router } from "vue-router";

export default function loginGuard(router: Router) {
  router.beforeEach((to, from, next) => {
    const thisRoutePublic = to.meta.publicRoute;

    const userStore = useUserStore();
    const isAuthenticated = userStore.isAuthenticated;

    if (!isAuthenticated && !thisRoutePublic) {
      ElMessage.error("请先登录");
      next({ name: "Login" });
    } else next();
  });
}

如果账号没登录，而且路由需要认证的话，跳转到登录页。

看这代码这么多叹号很烦，想着能不能像是数学乘法分配律那样，提个感叹号出来，幻想着是这样：

1
2
3

if (!(isAuthenticated && thisRoutePublic)) {
    // do something...
};

刚想用脑子模拟一下算算，就感到头晕恶心马上要呕吐了，我立即停止联想，拿出jest编写测试用例：

// calc.ts
class Calc {
  // 需要登录是false，不需要登录通过验证是true
  router(isAuthenticated: boolean, thisRoutePublic: boolean) {
    if (!(thisRoutePublic || isAuthenticated)) {
      return false;
    } else {
      return true;
    }
  }
}

export default new Calc();

这个是我把逻辑抽出来，单独用来测试的。

// calc.spec.ts
import calc from './calc';
// 一些方便观察的枚举
const unLogin = false;
const isLogin = true;
const isPublic = true;
const isPrivate = false;
const pass = true;
const reject = false;
describe('Calc', () => {
  // 需要登录是false，不需要登录通过验证是true
  test('没有登录，当前页面不需要认证', () => {
    const guardResult = calc.router(unLogin, isPublic);
    expect(guardResult).toBe(pass);
  });

  test('没有登录，当前页面需要认证', () => {
    const guardResult = calc.router(unLogin, isPrivate);
    expect(guardResult).toBe(reject);
  });

  test('有登录，当前页面不需要认证', () => {
    const guardResult = calc.router(isLogin, isPublic);
    expect(guardResult).toBe(pass);
  });

  test('有登录，当前页面需要认证', () => {
    const guardResult = calc.router(isLogin, isPrivate);
    expect(guardResult).toBe(pass);
  });
});