添加Swiper依赖后React+TypeScript项目Jest测试解析失败求助

我在使用React结合TypeScript进行开发时，添加Swiper依赖后，Jest测试开始出现解析失败的问题。

以下是我的相关配置：

jest.config.ts #

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
  verbose: true,
  transform: {
    '^.+\\.ts?$': 'ts-jest',
  },
  transformIgnorePatterns: ['node_modules/(?!swiper|ssr-window|dom7/)'],
};
export default config;

babel.config.js #

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
  plugins: [
    'babel-plugin-styled-components',
    '@babel/plugin-proposal-class-properties',
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  },
  transform: {
    '^.+\\.ts?$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
};

package.json（Jest相关配置片段） #

...
 "jest": {
    "moduleNameMapper": {
      "swiper/react": "swiper/react/swiper-react.js",
      "swiper/css": "swiper/swiper.min.css"
    },
    "transform": {
      "^.+\\.css$": "jest-transform-css"
    }
  },
  "transformIgnorePatterns": "node_modules/(?!(swiper|ssr-window|dom7)/)",
...

内容的提问来源于stack exchange，提问作者user15054235