如何将联合类型的打字稿添加到data-testid？答案

【问题标题】：How to add union type of typescript to data-testid?如何将联合类型的打字稿添加到data-testid？
【发布时间】：2022-12-03 02:39:23
【问题描述】：

我想在我的 React 应用程序中使用 data-testid 属性进行端到端测试，并且我很乐意使用自定义联合类型来进行类型安全测试。

我正在使用 React 和 MUI。我如何归档类型安全的数据 testid？我想知道我必须重写 JSX 元素周围的某种类型。

【问题讨论】：

【解决方案1】：

为了在 React 应用程序中使用 data-testid 属性进行类型安全的 e2e 测试，您需要对代码进行一些更改。

首先，您需要为 data-testid 属性创建自定义类型。此类型应该是 data-testid 属性在您的应用程序中可能具有的所有可能值的联合。例如：

type TestId = 'button' | 'input' | 'form' | 'list-item';

接下来，您需要修改 @types/react 包中 JSX.IntrinsicElements 接口的类型定义。该接口定义了可在 React 中使用的内置 HTML 元素的类型，例如 div、button 和 form。

要将 data-testid 属性添加到此接口，您需要为 JSX.IntrinsicElements 接口创建一个扩展，并为 data-testid 属性添加一个新属性。该属性应该是您之前定义的类型，并且它应该是可选的（使用 ? 语法），这样它就不会影响现有 HTML 元素的类型。

declare namespace JSX {
  interface IntrinsicElements {
    [elemName: string]: any;
    data-testid?: TestId;
  }
}

完成这些更改后，您将能够在 React 组件中使用 data-testid 属性并对其值进行类型安全访问。例如：

const MyComponent: React.FC = () => (
  <button data-testid="button">Click me</button>
);

【讨论】：