Reactjs 使用React测试库和TypeScript创建自定义查询

我在试着用打字机打字？我打算将其用于React项目

查询仅获取容器的

tbody

中的第一个

th

单元格：

// 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();

---

在类型定义中，

@测试库/dom

始终要求将

文本

作为第一个选项（尽管允许输入为

未定义

）。但是，我不确定这是否仍然适用于自定义查询的情况。显然，在没有指定参数的情况下，您已经成功地完成了，没有任何问题。（当然是

baz（）//baz（未定义）

）

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

在根目录下创建您的

类型

，该目录为您的回购创建了自定义类型，然后添加一个类似

testing library.dom.d.ts

的文件，其中包含以下内容：

类型/测试库.dom.d.ts

import“@testinglibrary/dom”；
声明模块“@测试库/dom”{
//这是为每个查询函数创建输出的函数
//我们将`（text？：P，options？：Q，waitForElementOptions？：W）=>R中的`text`改为可选`text``
导出类型BoundFunction=T扩展(
属性：字符串，
元素：HtmleElement，
文本：推断P，
选项：推断Q
)=>推断
？（文本：P，选项：Q）=>R
：T扩展(
a1：任何，
文本：推断P，
选项：推断Q，
waitForElementOptions：推断W
)=>推断
？（文本？：P，选项？：Q，waitForElementOptions？：W）=>R
：T扩展（a1:any，text:inferp，options:inferq）=>inferr
？（文本：P，选项：Q）=>R
：从不；
}

请记住，

在您的
tsconfig.json中包含
自定义文件

：

{
  // ...
  "include": [
    "types/*"
  ]
}

---

谢谢你的回答。我觉得这与解决方案非常接近，但是，这会导致一个错误

重复标识符“BoundFunction”

我昨天在同一个BoundFunction周围窥探，但我不确定所有的推断+条件在此定义中的含义，我的类型脚本还没有那么高级。也许我需要研究扩展现有的定义。你能更新错误来自哪里的答案吗+堆栈跟踪？我没有得到太多的堆栈跟踪，我的IDE只显示了一个错误：

TS2300:Duplicate identifier'BoundFunction'在行上

<代码>获取元素.d.ts的查询（3,13）：“BoundFunction”也在这里声明。此文件

node\u modules/@testing library/dom/types/get queries for element.d.ts

已包含

BoundFunction

定义。我正在阅读

Inferre

和

扩展

使用条件以尝试更好地理解这一点。你能分享你的看法吗那么tsconfig.json呢？当然，我把它添加到了原始问题的底部。我需要补充的是，这是一个盖茨比主题，所以它使用了

盖茨比插件类型脚本

，tsconfig.js纯粹用于IDE，据我所知，盖茨比使用了它自己的内部配置。

{
  // ...
  "include": [
    "types/*"
  ]
}