React 测试库的实用函数的返回类型

Question

我试图弄清楚 Testing Library React 返回的实用程序的返回类型应该是什么（而不是通用：任何）。

例如，使用以下内容，我得到 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();
});

Answer 1

setup返回一个您需要找出的 T 类型的 object。 它有：

• key: value ，其中key的名称是字符串'button'， value是typeof button ，即JSX.Element 。

• render()返回的类型内的所有键和值。 扩展运算符将其直接注入到类型 T 中。您没有显示render()的主体。 我猜它也会返回JSX.Element 。

所以我们有

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

我必须给render()一个带有示例代码的主体。 我们有：

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 };
};