Jest.js 警告:标记〈>在此浏览器中无法识别,如果要呈现React组件,请以大写字母开头

nx7onnlm  于 2023-01-28  发布在  Jest
关注(0)|答案(1)|浏览(189)

当我在一个使用TypeScript的React项目中使用jest运行测试时,我遇到了以下错误:

Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

或此错误:

Warning: The tag <circle> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

我尝试使用jest-svg-transformer来允许jest理解SVG,但这不起作用,因为这个包(及其所有分支)不适用于jest v29+。
事实证明,这是一个完全不同的问题。而且修复方法很简单(阅读答案)。

bxjv4tth

bxjv4tth1#

我的例子中的错误源于这样一个事实,即我使用的CustomComponent看起来像这样:

export default function CustomComponent(props) {
  return (
    <g>
      <circle {...props} />
    </g>
  );
}

<svg>不像svg那样 Package <g>元素。
将其省略是有充分理由的,因为CustomComponent用于库组件中,需要省略标记。
修复方法是将CustomComponent Package 在测试文件中,如下所示:

it('should test something', () => {
    const { baseElement } = render(
      <svg>
        <CustomDot
          {...props}
        />
      </svg>,
    );
    ...
});

当然,如果您不需要在CustomComponent中省略标记,您可以将svg元素 Package 在组件本身中,而不是 Package 在测试文件中。

相关问题