使用“ESNext”作为 TypeScript 库选项搞砸了反应测试库“屏幕”类型

Question

这似乎是一个非常晦涩难懂的错误，但不确定我会在哪里寻找它。

Repro for this here.

我有一个看起来像传统的 React+RTL+TypeScript+Jest 设置。

但是，如果我在 tsconfig.json 的 lib 选项中使用 ESNext，则会收到此错误（仅在 VSCode 中，测试仍然可以正常运行）。

userEvent.click(screen.getByText('aaaa'));

Argument of type '"aaaa"' is not assignable to parameter of type 'SelectorMatcherOptions | undefined'.ts(2345)

如果我从 lib 文件夹中删除 ESnext，然后重新启动，那么它可以正常工作。

这是一个错误，在这种情况下是哪个 Github 问题跟踪它？ （这是 TypeScript 还是 VSCode 的问题？）

否则，为什么会发生，我该如何解决？

Answer 1

这是一个非常有趣的问题。据我了解，问题不在于esnext lib。真正的问题是缺少 DOM 库。

如果您深入查看screen 方法的定义，您会看到每个方法的定义如下：

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;

• 如果没有DOM，tsc 将推断出第一个结果(text: P, options?: Q) => R，因为它看起来不知道HTMLElement 是什么。

• 如果有DOM，tsc 将知道您的输入aaa 不是HTMLElement，因此它推断出第二个结果：(text: P, options?: Q, waitForElementOptions?: W) => R。这就是它起作用的原因。

简而言之，只要将 DOM 指定为 lib 的一部分，它就会按预期工作：

tsconfig.json

{
  "lib": ["ESNext", "DOM"]
}