Return types for utility functions of React Testing Library

Question

I'm trying to figure out what should the return type be (instead of generic : any) for the utilities returned by Testing Library React.

For example, with the following, I get TS error (Unexpected any. Specify a different type.)

const setup = (): any => {
              //~~~~~ Unexpected any. Specify a different type.
  const utils = render(
...
  );
  const button = utils.getByText(/some text/i);
  return { button, ...utils };
};
test('it renders', () => {
  const { button } = setup();
  expect(button).toBeInTheDocument();
});

winwiz1 · Answer 1 · 2019-09-28T13:09:42.177

setup returns an object of the type T which you need to find out. It has:

key: value where the name of the key is the string 'button' and value is typeof button which is JSX.Element.
All the keys and the values that are inside the type returned by render(). Which the spread operator injects directly into the type T. You didn't show the body of render(). I guess it returns also JSX.Element.

So we have

type T = {
  button: JSX.Element
  ...
  // the internals of JSX.Element that spread operator directly injects here
  ...
}

I had to give render() a body with sample code. And we have:

const render = (): JSX.Element => {
  const MyButton = () => ( <div>Hello </div> )
  return (
    <>
    <MyButton />
    </>
  )
};

type T = {
  type: any;
  props: any;
  key: string | number | null;
  button: JSX.Element;
};

const setup = (): T => {
  const utils = render();
  const button =  <div>Hello </div>;
  return { button, ...utils };
};

Return types for utility functions of React Testing Library

1 Answers1