带有 renderProp 酶功能的打字稿错误答案

【问题标题】：Typescript error with renderProp enzyme function带有 renderProp 酶功能的打字稿错误
【发布时间】：2021-01-05 07:46:11
【问题描述】：

我创建了一个RestrictedRoute react typescript 组件。当用户连接并且页面被限制时，它应该重定向到 /dashboard 页面。如果不是，则返回一个 Route，其中包含传入 props 的组件。

RestrictedRoute.tsx：

interface Props {
  component: ComponentType;
  restricted?: boolean;
}

const RestrictedRoute = ({ component: Component, restricted, ...rest }: Props & RouteProps) => {
  const { data: userConnected, error } = useSWR('userConnected', checkUserLogged);

  if (userConnected !== undefined) {
    return (
      <Route
        {...rest}
        render={(props) =>
          userConnected && restricted && !error ? (
            <Redirect to={ROUTES.DASHBOARD} />
          ) : (
            <Component {...props} />
          )
        }
      />
    );
  }

  if (error) return <Redirect to={ROUTES.LOGIN} />;

  return <LoadingPage />;
};

export default RestrictedRoute;

我想用玩笑和酶来测试它。所以我创建了以下测试。它测试了在prop中传递的render prop返回组件。

RestrictedRoute.test.tsx:

interface RestrictedRouteProps {
  component: ComponentType;
}

describe('RestrictedRoute', () => {
  const props: RestrictedRouteProps = {
    component: () => <></>,
  };
  const mockUseSwr = useSWR as jest.Mock;
  beforeEach(() => {
    mockUseSwr.mockClear();
  });

it('should return Component when data fetched and user not connected', () => {
    const userConnected = false;
    const fakePath = '/youhou';
    mockUseSwr.mockReturnValueOnce({ data: userConnected });
    const wrapper = shallow(<RestrictedRoute component={props.component} path={fakePath} />)
      .find(Route)
      .renderProp('render')();
    expect(wrapper.find(props.component)).toHaveLength(1);
  });

测试正常，但编译时出现以下打字错误：

Argument of type '"render"' is not assignable to parameter of type '"children"'.

当我将 .renderProp('render')(); 替换为 .renderProp<RouteProps>('render')(); 时，我看到另一个错误：Type 'RouteProps' does not satisfy the constraint '"children"'

你能帮我解决这个问题吗？

【问题讨论】：

标签： reactjs typescript types enzyme typescript-generics

【解决方案1】：

我找到了一个解决方案，它使用 RouteProps 类型和路由组件道具模拟作为 renderProp 参数（必须的，因为 react-router-dom 的渲染函数在他的打字稿定义中需要这个）：

const routeComponentPropsMock = {
    history: {} as any,
    location: {} as any,
    match: {} as any,
  };

it.only('should return Component when data fetched and user not connected', () => {
    const userConnected = false;
    const fakePath = '/youhou';
    mockUseSwr.mockReturnValueOnce({ data: userConnected });
    const wrapper = shallow(<RestrictedRoute component={props.component} path={fakePath} />);
    const routeWrapper = wrapper.find<RouteProps>(Route).renderProp('render')(
      routeComponentPropsMock,
    );
    expect(routeWrapper.find(props.component)).toHaveLength(1);
  });

【讨论】：