如何使用 React 和 React-Router 测试私有路由

Question

I'm trying to test Private Routing in my React App. I'm using the following versions:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",

In my PrivateRoute.js I'm simply checking if user is logged in and redirecting accordingly:

...
const PrivateRoute = (props) => {
  const { component: Component, ...rest } = props;
  const user = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={(matchProps) =>
        user ? <Component {...matchProps} /> : <Redirect to="/SignIn" />
      }
    />
  );
};
...

In my PrivateRoute.test.js I'm simply rendering <PrivateRoute> and checking the history.location.pathname . However, I always get / when expecting /SignIn .

describe("<PrivateRoute/>", () => {
  it("redirects unauthenticated users to SignIn", async () => {
    const history = createBrowserHistory();
    render(
      <BrowserRouter>
        <Switch>
          <PrivateRoute exact path="/SomeRoute" component={SomeComponent} />
        </Switch>
      </BrowserRouter>
    );

    expect(history.location.pathname).toBe("/SignIn");
  });
});

What am I missing?

Answer 1

The answer is to use <Router history={history}> along with createMemoryHistory as seen below:

This comes from React Router Documentaiton

See example test below:

it("redirects unauthenticated users to SignIn", async () => {
    const history = createMemoryHistory ({ initialEntries: ["/Private"] });
    const PrivateComponent = () => <>Private!</>
    const PublicComponent = () => <>Redirected!</>
    render(
        <Router history={history}>
          <Switch>
            <PrivateRoute exact path="/Private" component={PrivateComponent} />
            <Route exact path="/SignIn" component={PublicComponent} />
          </Switch>
        </Router>
    );
    expect(screen.queryByText("Private!")).not.toBeInTheDocument();
    expect(screen.queryByText("Redirected!")).toBeInTheDocument();
    expect(history.location.pathname).toBe("/SignIn")
  });

Answer 2

The reason maybe is that you're redirecting the user to the SignIn component if the AuthContext isn't present. But I think the AuthContext is always present. So, you should pass a value to the context when a user logs in. And check if the value is present.

 function PrivateRoute({ children, ...rest }) { const [loggedInUser] = useContext(AuthContext); return ( <Route {...rest} render={({ location }) => loggedInUser.isSignedIn? ( children ): ( <Redirect to={{ pathname: "/SignIn", state: { from: location } }} /> ) } /> ); }

And you'll have to use the PrivateRoute component in the app.js just like you use a Route component.

 import React from 'react' import PrivateRoute from 'path/to/PrivateRoute/component' export const UserContext = createContext(); export default function App() { const [loggedInUser, setLoggedInUser] = useState({}); return ( <UserContext.Provider value={[loggedInUser, setLoggedInUser]}> <Router> <Switch> <PrivateRoute path="/top-secret"> <SecretDoor></SecretDoor> </PrivateRoute> <Route path="/SignIn"> <SignIn></SignIn> </Route> </Switch> </Router> </UserContext.Provider> ) }