如何测试渲染 svg 的组件？答案

【问题标题】：How to test components which render pieces of svg?如何测试渲染 svg 的组件？
【发布时间】：2019-06-25 09:35:29
【问题描述】：

我对反应还很陌生。我正在编写将在<svg> 标签中使用的组件。

我想对这些组件进行测试。但是，我所有的测试都无法识别<svg> 的有效子代，例如<path>、<rect>和<circle>等

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-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)

预期： svg 标签应该被渲染

【问题讨论】：

你是否尝试过在 React 中渲染 <svg> 标签，以便它知道它试图渲染的上下文？

标签： reactjs svg jestjs

【解决方案1】：

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

FWIW，你可以用<svg> 包裹组件以使 Jest 测试通过：

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

【讨论】：

【解决方案2】：

感谢DoMiNeLa10的评论。

React 应该渲染 <svg> 元素，然后它就可以工作了 :)

it('renders without crashing', () => {
  const div = document.createElement('div');
    ReactDOM.render(<svg xmlns="http://www.w3.org/2000/svg">
      <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>, div);
  ReactDOM.unmountComponentAtNode(div);
});

【讨论】：