Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 使用Jest测试SVGR作为React组件_Reactjs_Typescript_Webpack_Jestjs - Fatal编程技术网

Reactjs 使用Jest测试SVGR作为React组件

Reactjs 使用Jest测试SVGR作为React组件,reactjs,typescript,webpack,jestjs,Reactjs,Typescript,Webpack,Jestjs,在svg组件上运行测试时收到警告。它不是导致测试失败,而是试图清理它。使用SVGR将svg文件用作react组件。我认为问题在于Jest无法在webpack中看到svgr配置,但不确定如何修复它 警告 console.error Warning: <ReactComponent /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

在svg组件上运行测试时收到警告。它不是导致测试失败,而是试图清理它。使用SVGR将svg文件用作react组件。我认为问题在于Jest无法在webpack中看到svgr配置,但不确定如何修复它

警告

  console.error
    Warning: <ReactComponent /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
        at ReactComponent
        at Icon (/code/common/javascript/components-2.0/lib/brand/Icon/index.tsx:9:11)
index.js

import React from "react";
import className from "classnames";

import { IconTypes } from "./Icon.types";
import iconNames from "./Icon.Components";
import styles from "./Icon.module.scss";

const Icon: React.FC<IconTypes> = (props: IconTypes): JSX.Element| null => {
  const { id, name, extraClass, color = "black", size = "medium" } = props;
  const iconClasses = className(styles[size], styles[color], extraClass);

  const IconComponent = iconNames[name];

  if (typeof iconNames[name] !== "undefined") {
    return React.createElement(
      iconNames[name],
      {
        id:id,
        className:iconClasses,
        "data-testid":`test__${id}-icon`,
      },
      null
    );
  } else {
    return null;
  }
};

export default Icon;
import * as React from "react";

export default "SvgrURL";
export const ReactComponent = "div";
"moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/lib/$1",
    "components-2.0": "<rootDir>/__mocks__/components-2.0
    "\\.(pdf|jpg|jpeg|png|gif|ico|xml|manifestjson|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
    "\\.svg$": "<rootDir>/__mocks__/components-2.0/svgrMock.js"
  },
import * as React from "react";

export default "SvgrURL";
export const ReactComponent = "div";