描述Bug

如果我们导入一个SVG文件，其文件名包含一些字符，如@，react-scripts test将失败。例如logo@2x.svg。原因是当packages/react-scripts/config/jest/fileTransform.js将logo@2x.svg转换为名称为SvgLogo@2X的组件时（请参见下面的图像）。这不是有效的组件名称（或javascript变量）。我将通过将一个非字母、非数字、非下划线的字符转换为ASCII数字来修复此问题。请参见#10514

环境

Environment Info:

  current version of create-react-app: 4.0.2
  running from /Users/henry/.npm/_npx/57393/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Edge: Not Found
    Firefox: 84.0
    Safari: 13.1.3
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.2 => 4.0.2 
  npmGlobalPackages:
    create-react-app: Not Found

重现步骤

只需导入文件名为logo@2x.svg的图像

import logo2 from './logo@2x.svg';

• https://github.com/nvh95/create-react-app-reproduce/blob/reproduce-file-transform-failed/src/App.js#L1
• https://github.com/nvh95/create-react-app-reproduce/blob/reproduce-file-transform-failed/src/App.test.js

git clone https://github.com/nvh95/create-react-app-reproduce
yarn
yarn test -- --watchAll

预期行为

测试应通过

实际行为

测试失败

可重现的演示

• https://github.com/nvh95/create-react-app-reproduce/blob/reproduce-file-transform-failed/src/App.js#L1
• https://github.com/nvh95/create-react-app-reproduce/blob/reproduce-file-transform-failed/src/App.test.js