我正在尝试为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"
}
}