javascript - 如何在 reactjs 中编写身份验证流程测试

Question

我正在尝试使用jest和测试我的仪表板页面react-test-library。但问题是，即使在我的测试用例中渲染组件后，我也无法访问 dom 元素，它在运行后登录时向我显示了注册页面 dom 元素yarn test。

我不知道如何测试这个。当用户登录时，我的身份验证流程是这样的，我将 access_token 和刷新令牌保存到本地存储。

也有两条路线：

1. 私人路线和
2. 公共路线

我也收到此错误：

node:internal/process/promises:246 triggerUncaughtException(err, true /* fromPromise */); ^

[UnhandledPromiseRejection：此错误源于在没有 catch 块的情况下抛出异步函数内部，或拒绝未使用 .catch() 处理的承诺。承诺被拒绝，原因是“TypeError: r.node.getBBox is not a function”。] { code: 'ERR_UNHANDLED_REJECTION' }

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
  RouteComponentProps,
} from "react-router-dom";


const isAuth = () => {
  const token = localStorage.getItem("access_token");
  const refreshToken = localStorage.getItem("refresh_token");

  if (!token || !refreshToken) {
    return false;
  }

  try {
    const decodeToken: JwtPayload = decode(refreshToken);
    const { exp } = decodeToken;

    if ((exp as number) < new Date().getTime() / 1000) {
      localStorage.removeItem("access_token");
      localStorage.removeItem("refresh_token");
      localStorage.removeItem("status");
      localStorage.removeItem("logginSession");
      return false;
    }
  } catch (error) {
    return false;
  }
  return true;
};

export const PrivateRoute = ({ children, ...rest }: any) => {
  return (
    <SideBar>
      <Route
        {...rest}
        render={({ location }: RouteComponentProps) =>
          isAuth() ? (
            children
          ) : (
            <Redirect
              to={{
                pathname: "/login",
                // state: { from: location }
              }}
            />
          )
        }
      />
    </SideBar>
  );
};

const AuthCheckRoute = ({ children, ...rest }: any) => {
  return (
    <Route
      {...rest}
      render={({ location }: RouteComponentProps) =>
        localStorage.getItem("status") === "user" ? (
          <Redirect
            to={{
              pathname: "/dashboard",
              // state: { from: location }
            }}
          />
        ) : (
          children
        )
      }
    />
  );
};

const Routes: React.FC = () => {
  return (
    <Router>
      <Switch>
        <PrivateRoute exact path="/dashboard" children={<Dashboard />} />
        <PrivateRoute exact path="/invoices" children={<CustomerInvoices />} />
        <AuthCheckRoute exact path="/login" children={<Login />} />
        <AuthCheckRoute path="/" children={<Login />} />
      </Switch>
    </Router>
  );
};

export default Routes;

这就是我尝试测试的方式：

import React from "react";
import Dashboard from "../../../pages/Dashboard";
import { render } from "@testing-library/react";
import { ThemeProvider } from "@material-ui/styles";
import CustomTheme from "../../../assets/globalstyles/GlobalStyles";
import {
  BrowserRouter,
  BrowserRouter as Router,
  Switch,
} from "react-router-dom";



test("render Dashboard page", () => {
  const { getByText, debug } = render(
    <ThemeProvider theme={CustomTheme}>
      <BrowserRouter> <--- if i remove this line
        <Switch>  <---and this line  then it shows signup dome element otherwise it shows above error.
          <Dashboard />
        </Switch>
      </BrowserRouter>
    </ThemeProvider>
  );

  expect(getByText("Dashboard")).toBeInTheDocument();
  debug();    <-- this signup is showing me dom elements of signup page instead of Dashboard page.
});

标签： javascriptreactjsjestjsreact-testing-library