'(content: string, node: Element | null) => boolean | 类型的参数空 | undefined' 不可分配给 'Matcher' 类型的参数

Question

我有一个 React Typescript 应用程序，在进行单元测试时，我使用以下代码通过其 textContent 查找元素：

import { screen } from "@testing-library/react";

export function getByTextContent(textMatch: string | RegExp): HTMLElement {
  return screen.getByText((content, node) => {
    const hasText = (node: Element) =>
      node.textContent === textMatch || node.textContent?.match(textMatch);
    const nodeHasText = hasText(node as Element);
    const childrenDontHaveText = Array.from(node?.children || []).every(
      (child) => !hasText(child)
    );
    return nodeHasText && childrenDontHaveText;
  });
}

我从 here

中获取了代码

我的测试通过了，但应用程序崩溃并出现以下错误：

Argument of type '(content: string, node: Element | null) => boolean | null | undefined' is not assignable to parameter of type 'Matcher'.
  Type '(content: string, node: Element | null) => boolean | null | undefined' is not assignable to type 'MatcherFunction'.
    Type 'boolean | null | undefined' is not assignable to type 'boolean'.
      Type 'undefined' is not assignable to type 'boolean'.  TS2345

    2 | 
    3 | export function getByTextContent(textMatch: string | RegExp): HTMLElement {
  > 4 |   return screen.getByText((content, node) => {
      |                           ^
    5 |     const hasText = (node: Element) =>
    6 |       node.textContent === textMatch || node.textContent?.match(textMatch);
    7 |     const nodeHasText = hasText(node as Element);

Answer 1

问题是当你使用 ?（如 node.textContent?.match(textMatch);）时，结果可能是 undefined，而 javascript 没问题，TS 看到return nodeHasText && childrenDontHaveText; 可能是 return undefined && undefined 并指出 undefined 不完全是 boolean。一种解决方法是 return nodeHasText && childrenDontHaveText || false;

'(content: string, node: Element | null) => boolean | 类型的参数空 | undefined' 不可分配给 'Matcher' 类型的参数

Argument of type '(content: string, node: Element | null) => boolean | null | undefined' is not assignable to parameter of type 'Matcher'

javascript

typescript

reactjs

react-testing-library