Question

我需要测试以下组件（基本上，我想在存在用户名和刷新令牌时测试App组件的存在）：

const ParentRouter = () => {
  const { username, refreshToken } = useContext(GlobalContext);
  return (
    <Switch data-test="component-ParentRouter">
      {console.log("test1")}
      <Route path="/login" component={LoginPage} />
      <Route path="/forgotpassword" component={LoginPage} />
      {console.log("test2")}
      <ProtectedRoute
        isAllowed={refreshToken}
        username={username}
        path="/"
        component={App}
      />
    </Switch>
  );
};

这是我到目前为止的尝试：

const TestProtectedRouteWithCredentials = () => (
  <MemoryRouter initialEntries={["/ProjectsOverview/"]}>
    <GlobalContext.Provider
      value={{
        username: "testUser1",
        refreshToken: "hfsjkadhfjkshdfjkshdafs"
      }}
    >
      <ParentRouter />
    </GlobalContext.Provider>
  </MemoryRouter>
);

test("if userame and props then allow redirect to protected route i.e. app", () => {
  const wrapper = shallow(<TestProtectedRouteWithCredentials />);
  expect(
    wrapper
      .find(ParentRouter)
      .dive()
      .find(App)
  ).toHaveLength(1);
});

我似乎无法正常工作。

TypeError：无法解构'undefined'或'null'的属性username。

我已经搜索了一下，但没有真正找到我想要的东西。如果有人可以向我展示使用Jest和Enzyme测试该组件的一种不错的方法，我将不胜感激。

Answer 1

有一个open issue关于useContext()不适用于浅酶。尝试改用mount。

如果您不想使用mount，可以尝试模拟GlobalContext作为一种解决方法。 an article在这里解释了如何实现。

开玩笑和酵素：如何使用useContext（）

1 个答案: