0

我正在尝试为TypeScript中的测试库创建自定义查询？我打算将它与 React 项目一起使用。

该查询只是获取容器th中的第一个单元格：tbody

// all-table-headings.ts - contains the custom query

import { buildQueries } from '@testing-library/dom';

const queryAllTableHeadings = (container: HTMLElement): HTMLElement[] =>
  Array.from(container.querySelectorAll('thead th'));

const getMultipleError = () => '...';
const getMissingError = () => 'Could not find any table headings!';

const [
  queryTableHeadings, getAllTableHeadings, getTableHeadings, findAllTableHeadings, findTableHeadings
] = buildQueries(queryAllTableHeadings, getMultipleError, getMissingError);

export {
  queryTableHeadings, getAllTableHeadings, getTableHeadings, findAllTableHeadings, findTableHeadings
};

在这里，查询被添加到自定义渲染函数中：

// index.ts - exports a custom render function

import { queries, render } from '@testing-library/react';
import * as allTableHeadings from './all-table-headings';
import * as allCellsAtRow from './all-cells-at-row';

const customRender = (ui, options = {}) =>
  render(ui, {
    queries: {
      ...queries,
      ...allTableHeadings,
      ...allCellsAtRow
    },
    ...options
  });

export * from '@testing-library/react';
export { customRender as render };

这是一个非常简单的用法示例：

const TestComponent = () => <div>Test Component</div>;
const { getAllTableHeadings } = render(<PropsTable component={ TestComponent }/>);
const headings = getAllTableHeadings();

然而 TypeScript 抱怨如下：

TS2554：预期 1-3 个参数，但得到 0。

打字稿错误

如果我通过添加忽略错误，// @ts-ignore我可以确认自定义查询有效，只是 TS 有点不高兴。

这是可以通过添加 d.ts 文件来解决的问题吗，测试库上的文档不是很清楚如何解决添加自定义查询的 TypeScript 方法。

这是我的 tsconfig.json 供参考：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}
4

1 回答 1

1

在类型定义中@testing-library/dom始终需要text作为第一个选项（尽管允许输入 as undefined）。但是，我不确定这是否仍然适用于您的自定义查询。显然，在没有指定参数的情况下，您已经成功完成，没有任何问题。（当然baz() // <=> baz(undefined)）。

无论如何，要回答您关于是否有办法覆盖类型的问题，所以答案是肯定的。以下是实现目标的方法：

在根目录创建您types的存储库的自定义类型，然后添加testing-library.dom.d.ts具有以下内容的文件：

types/testing-library.dom.d.ts

import "@testing-library/dom";

declare module "@testing-library/dom" {
  // This is the function creates the output for each query function
  // we changed `text` to become optional `text?` in `(text?: P, options?: Q, waitForElementOptions?: W) => R`
  export type BoundFunction<T> = T extends (
    attribute: string,
    element: HTMLElement,
    text: infer P,
    options: infer Q
  ) => infer R
    ? (text: P, options?: Q) => R
    : T extends (
        a1: any,
        text: infer P,
        options: infer Q,
        waitForElementOptions: infer W
      ) => infer R
    ? (text?: P, options?: Q, waitForElementOptions?: W) => R
    : T extends (a1: any, text: infer P, options: infer Q) => infer R
    ? (text: P, options?: Q) => R
    : never;
}

请记住，include您的自定义文件tsconfig.json：

{
  // ...
  "include": [
    "types/*"
  ]
}
于 2021-01-22T04:30:15.420 回答