使用 React testing-library 和 TypeScript 創建自定義查詢

Question

我正在嘗試為 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
};

這里查詢被添加到自定義渲染 function：

// 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 arguments，但得到 0。

如果我通過添加// @ts-ignore來忽略錯誤，我可以確認自定義查詢有效，只是 TS 有點不高興。

這是可以通過添加 d.ts 文件來解決的問題嗎，測試庫上的文檔不是很清楚如何解決添加自定義查詢的 TypeScript 方法。

這是我的 tsconfig.json 供參考：

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

Answer 1

在類型定義中， @testing-library/dom始終需要text作為第一個選項（盡管允許輸入為undefined ）。 但是，我不確定這是否仍然適用於您的自定義查詢。 顯然，在沒有指定參數的情況下，您已經成功完成，沒有任何問題。 （當然是baz() // <=> baz(undefined) ）。

無論如何，要回答您關於是否有辦法覆蓋類型的問題，所以答案是肯定的。 以下是實現目標的方法：

在根目錄中創建您的types ，為您的 repo 自定義類型，然后添加像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;
}

請記住，在您的tsconfig.json中include自定義文件：

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

Answer 2

我遇到了同樣的錯誤，在將"@testing-library/dom" package 更新到當前最新版本（ ^8.17.1 ）后為我解決了這個問題。