Cesium + React + Webpack + TS +jest test failed

My Issue
I use JEST to test my projects, now I have two problems, I want to ask for your help, thank you so mach.
one
import * a Cesium from ‘cesium/Cesium’ an error is ‘cesium/Cesium’ Module not found
but const Cesium = require( ‘cesium/Cesium’) is ok
two
When I used Jest to test my projects, I have preset, modulePaths, moduleDirectories, Transform, transformIgnorePatterns, moduleNameMapper, and testMatch in jest.config.js,but there was a bug in the test.
The error message is as follows:
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

D:\project\insky\insky-space-route\node_modules\cesium\Source\Cesium.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export var VERSION = '1.85';
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

> 1 | const Cesium = require('cesium/Cesium');
      |              ^
  2 |
  3 | describe('test utils: Cesium', () => {
  4 |   it('construct with default values', function() {

The dependencies of my project are as follows:
cesium: 1.75.0
webpack: 5.39.1
webpack-cli:4.7.2
react:17.0.2
jest:27.1.1
I use typescript

The environment I configured is as follows:

jest.config.js
module.exports = {

preset: ‘ts-jest/presets/js-with-babel’,

setupFiles: [‘jest-localstorage-mock’],

// 指定 jest 执行环境

testEnvironment: ‘node’,

modulePaths: [‘node_modules’, ‘src’],

moduleDirectories: [‘node_modules’, ‘src’],

clearMocks: true,

collectCoverage: true,

transform: {

'^.+\\.(js|jsx)$': 'babel-jest',

'^.+\\.(ts|tsx)$': 'ts-jest'

},

transformIgnorePatterns: [’/node_modules/(?!(lodash-es|other-es-lib|cesium))’],

// 指定测试文件的扩展名

moduleFileExtensions: [

'ts',

'tsx',

'js',

'jsx',

],

// 支持webpack中的别名

moduleNameMapper: {

'^cesium(.*)$': '<rootDir>/node_modules/cesium/Source$1',

},

// 指定jest加载的目标

testMatch: [

'<rootDir>/tests/**/*.{spec,test}.{js,jsx,ts,tsx}'

],

};

webpack.config.js
const path = require(‘path’);

const webpack = require(‘webpack’);

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

function resolve(dir) {

return path.join(__dirname, ‘…’, dir);

}

// function assetsPath(path) {

// // 可根据实际情况修改

// return path.posix.join(‘static’, path);

// }

const cesiumSource = ‘node_modules/cesium/Source’;

const cesiumWorkers = ‘…/Build/Cesium/Workers’;

module.exports = {

entry: {

app: './src/index.tsx'

},

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

  template: './src/index.html'

}),

new CopyWebpackPlugin({

  patterns: [

    { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },

    { from: path.join(cesiumSource, 'Assets'), to: 'Assets' },

    { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },

    { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }

  ]

}),

new webpack.DefinePlugin({

  //Cesium载入静态的资源的相对路径

  CESIUM_BASE_URL: JSON.stringify('')

}),

new webpack.LoaderOptionsPlugin({

  options: {

    // 配置根目录

    rootDir: path.resolve(__dirname, '.'),

  }

})

// new HardSourceWebpackPlugin()

],

output: {

filename: '[name].bundle.js',

path: path.resolve(__dirname, '../', 'build'),

sourcePrefix: '',

},

amd: {

// Enable webpack-friendly use of require in Cesium

toUrlUndefined: true,

},

resolve: {

extensions: ['.js', '.json', '.sass', '.scss', '.less', 'jsx', '.ts', '.tsx'],

alias: {'cesium': path.resolve(cesiumSource)},

},

module: {

unknownContextCritical: false,

rules: [

  {

    test: /\.tsx?$/,

    use: 'ts-loader',

    include: [resolve('src')],

    exclude: /node_modules/

  },

  {

    test: /\.(js|jsx)$/,

    exclude: /node_modules/,

    include: [resolve('src')],

    use: {

      loader: 'babel-loader?cacheDirectory', // babel-loader提供了cacheDirectory选项参数,默认为false。

      options: {

        presets: ['@babel/preset-env'],

        // 开启babel缓存

        // 第二次构建时,会读取之前的缓存

        // 用来缓存 loader的执行结果。之后的webpack 构建,将会尝试读取缓存,

        // 来避免在每次执行时,可能产生的、高性能消耗的 Babel

        // 重新编译过程(recompilation process)。

        cacheDirectory: true,

      }

    },

  },

  {

    test: /\.html$/,

    // 处理html中的图片文件 引入img文件进而让url-loader处理

    loader: 'html-loader',

    // use: [

    //   {

    //     loader: 'html-loader'

    //   }

    // ]

  },

  {// for antd less

    test: /\.less$/,

    include: [resolve('node_modules/antd')],

    use: [{

      loader: 'style-loader'

    }, {

      loader: 'css-loader',

      options: {

        sourceMap: true,

      }

    }, {

      loader: 'less-loader',

      options: {

        sourceMap: true,

        lessOptions: {

          javascriptEnabled: true

        }

      }

    }]

  },

  {// for local project less

    test: /\.less$/,

    exclude: [resolve('node_modules'), resolve('src/theme')],

    use: [{

      loader: 'style-loader'

    }, {

      loader: 'css-loader',

      options: {

        sourceMap: true,

        modules: {

          localIdentName: '[path][name]-[local]-[hash:5]'

        }

      }

    }, {

      loader: 'less-loader',

      options: {

        sourceMap: true,

        lessOptions: {

          modifyVars: {

            'primary-color': '#2d2d2d',

            'link-color': '#1DA57A',

            'text-color': '#fff',

            'component-background': '#9a3636',

          },

          javascriptEnabled: true

        }

      }

    }]

  },

  { // file-loader 解决css等文件中引入图片路径的问题

    // url-loader 当图片较小的时候会把图片BASE64编码,大于limit参数的时候还是使用file-loader 进行拷贝

    test: /\.(png|jpg|jpeg|gif|svg|webp)/,

    // webpack 5 内置了资源类型,已经废弃了之前的 url-loader 和 file-loader

    type: 'asset/resource',

    // use: [

    //   {

    //     loader: 'url-loader',

    //     options: {

    //       name: assetsPath('images/[name].[hash:7].[ext]'),

    //       limit: 24,

    //       esModule: false

    //     },

    //   },

    // ],

  }

]

}

};

.babelrc.js
module.exports = {

env: {

test: {

  presets: [

    ["@babel/preset-env",  { modules: 'commonjs' }],

    "@babel/preset-react",

    "@babel/preset-typescript"

  ],

  plugins: ["@babel/plugin-transform-modules-commonjs"]

}

}

}

tsconfig.json
{

“compilerOptions”: {

"outDir": "./dist/",

"noImplicitAny": true,

"module": "commonjs",

"target": "es6",

"jsx": "react",

// 编译时引入的ES功能库

"lib": ["esnext","es5", "es6", "dom"],

"allowJs": true,

"sourceMap": true,

"strict": true,

"forceConsistentCasingInFileNames": true,

"allowSyntheticDefaultImports": true,

"moduleResolution": "node",

"types": [

  "node",

  "jest",

  "cesium"

],

},

“include”: [“src”],

“exclude”: [

"node_modules"

]

}

Hope the community can help, I would appreciate disrespect!