Argument of type '"tech"' is not assignable to parameter of type 'PropsWithChildren<Props>'

Question

I'm getting an error when I try to test the function getProblemType. Argument of type '"tech"' is not assignable to parameter of type 'PropsWithChildren<Props>'. Below is the code for my component.

interface Props {
  type: SupportType;
}

export function getProblemType(srType:SupportType):ProblemTypeEnum {
  switch (srType) {
    case "limit":
      return "LIMIT";
    case "account":
      return "ACCOUNT";
    default:
      return "TECH";
  }
}
const Auth: React.FC<Props> = (props) => {
  const problemType  = getProblemType(props.supportType);
  const supportValidate = apiCalls.callSupport(false, "123", userId, problemType, state.homeRegionName);
 return (<>....</>)
};
export default Auth;

and my test looks like below

describe("Auth tests", () => {
  let mock : Props;
  const runProblemTypeTest = (url: string, supportType: SupportType) => {
  }
  mount(
      <Auth supportType={supportType}>
        <div>TestChild</div>
      </Authorization>
    );
    expect(apiCalls).toHaveBeenCalledWith(
      false,
      "1234",
      "test",
      getProblemType(supportType),
      "homeRegion"
    );

  it("check getProblemType when support is tech", () => {
    mock.supportType = "tech";
    expect(getProblemType(mock.supportType)).toEqual("TECH");
  });
  
  it("check problem type passed to validate when problem type absent in the url", () => {
    mock.supportType = "tech";
    runProblemTypeTest("http://www.test.com", "tech");
  });
});

when I pass mock.supportType on getProblemType, I get below error Argument of type '"tech"' is not assignable to parameter of type 'PropsWithChildren<Props>'.

Answer 1

The test mistakenly uses default import instead of named. So getProblemType is assigned the component and expects to be passed props. Hence the error. Fix by inserting braces:

 import { getProblemType } from "components/Common/Authorization";