Describe the bug

If we import an SVG which filename contains some characters like @, react-scripts test will fail. For example logo@2x.svg. The reason is when packages/react-scripts/config/jest/fileTransform.js transforms logo@2x.svg to a component with the name of SvgLogo@2X (see image bellow). It is not a valid component name (or javascript variable). I am putting a PR to fix this by converting a character which is non-letter, non-number, non-underscore, into an ASCII number. Please see #10514

Environment

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

Steps to reproduce

Just import an image with the filename of 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

Expected behavior

The test should pass

Actual behavior

The test failed

Reproducible demo

• 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