Reactjs 如何测试呈现svg片段的组件？

我还没反应过来。我正在编写将在

标记中使用的组件

我想对这些部件进行测试。 但是，我的所有测试都无法识别

的有效子项，例如

、

和

等

import React from 'react';
import ReactDOM from 'react-dom';
import { Layout } from './Layout';
import { LayoutAlignmentHorizontal, LayoutAlignmentVertical, LayoutFlow } from './Layout.enum';


it('renders without crashing', () => {
  const svg = document.createElement('svg');
  svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
    ReactDOM.render(<Layout flow={LayoutFlow.COLUMN}
                            horizontalAlignment={LayoutAlignmentHorizontal.LEFT}
                            verticalAlignment={LayoutAlignmentVertical.TOP}>
      <rect width={50} height={50} fill={'red'}/>
      <circle r={15} fill={'blue'} transform="translate(15 15)"/>
      <path transform="scale(.15)"
            d="M 10,30 A 20,20 0,0,1 50,30
               A 20,20 0,0,1 90,30
               Q 90,60 50,90
               Q 10,60 10,30 z"
            fill={'green'}/>
    </Layout>, svg);
  ReactDOM.unmountComponentAtNode(svg);
});

从“React”导入React；
从“react dom”导入react dom；
从“/Layout”导入{Layout}；
从“/Layout.enum”导入{LayoutAlignmentHorizontal、LayoutAlignmentVertical、LayoutFlow}；
它（'渲染而不崩溃'，（）=>{
const svg=document.createElement（'svg'）；
setAttribute（'xmlns'，'http://www.w3.org/2000/svg');
ReactDOM.render(
，svg）；
unmountComponentAtNode（svg）；
});

实际：

$ react-scripts test
 FAIL  src/containers/layout/Layout.test.tsx
  ● Console

    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: The tag <rect> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
          in rect (at Layout.test.tsx:11)
          in g (at Layout.tsx:60)
          in g (at Layout.tsx:71)
          in Layout (at Layout.test.tsx:10)
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
          in g (at Layout.tsx:60)
          in g (at Layout.tsx:71)
          in Layout (at Layout.test.tsx:10)
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: The tag <circle> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
          in circle (at Layout.test.tsx:12)
          in g (at Layout.tsx:60)
          in g (at Layout.tsx:71)
          in Layout (at Layout.test.tsx:10)
    console.error node_modules/react-dom/cjs/react-dom.development.js:506
      Warning: The tag <path> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
          in path (at Layout.test.tsx:13)
          in g (at Layout.tsx:60)
          in g (at Layout.tsx:71)
          in Layout (at Layout.test.tsx:10) 

$react脚本测试
src/containers/layout/layout.test.tsx失败
● 安慰
console.error节点_modules/react-dom/cjs/react-dom.development.js:506
警告：此浏览器无法识别该标记。如果要呈现React组件，请以大写字母开头其名称。
在矩形中（在Layout.test.tsx:11处）
在g中（布局图tsx:60处）
在g中（布局图tsx:71处）
布局内（布局测试时tsx:10）
console.error节点_modules/react-dom/cjs/react-dom.development.js:506
警告：此浏览器无法识别该标记。如果要呈现React组件，请以大写字母开头其名称。
在g中（布局图tsx:60处）
在g中（布局图tsx:71处）
布局内（布局测试时tsx:10）
console.error节点_modules/react-dom/cjs/react-dom.development.js:506
警告：此浏览器无法识别该标记。如果要呈现React组件，请以大写字母开头其名称。
圆内（在布局测试tsx:12处）
在g中（布局图tsx:60处）
在g中（布局图tsx:71处）
布局内（布局测试时tsx:10）
console.error节点_modules/react-dom/cjs/react-dom.development.js:506
警告：此浏览器无法识别该标记。如果要呈现React组件，请以大写字母开头其名称。
路径中（在Layout.test.tsx:13处）
在g中（布局图tsx:60处）
在g中（布局图tsx:71处）
布局内（布局测试时tsx:10）

预期： svg标记应该呈现

，这要归功于的注释

React应该呈现

元素，然后它就会工作：）

it（'呈现而不崩溃'，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render(
，分区）；
ReactDOM.unmountComponentAtNode（div）；
});

我在Jest测试套件中使用SVG组件时遇到了这个问题

FWIW，您只需使用

包装组件即可使Jest测试通过：

test('something', () => {
  mount(<svg><MySVGComponent /></svg>)
})

test（'something'，（）=>{
挂载（）
})

您是否尝试过在React中呈现

标记，以便它知道要呈现的内容的上下文？

test('something', () => {
  mount(<svg><MySVGComponent /></svg>)
})