Jest snapshot testing not showing custom classname

[thongchatbananacoding]

What's happening

I add some classname

but the snapshot test not showing this classname

What should happen

classname should be display like here :

To reproduce
(list the steps to reproduce this behavior)

CRACO version
6.4.3

CRACO config

craco.config.js

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");
const WebpackBar = require("webpackbar");
const CracoAntDesignPlugin = require("craco-antd");
const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent"); // included in Create React App
const path = require("path");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

// Don't open the browser during development
process.env.BROWSER = "none";

module.exports = {
  reactScriptsVersion: "react-scripts" /* (default value) */,
  style: {
    modules: {
      localIdentName: "",
    },
    css: {
      loaderOptions: (cssLoaderOptions, { env, paths }) => {
        return cssLoaderOptions;
      },
    },
    sass: {
      loaderOptions: (sassLoaderOptions, { env, paths }) => {
        return sassLoaderOptions;
      },
    },
    postcss: {
      mode: "extends" /* (default value) */ || "file",
      plugins: [],
      env: {
        autoprefixer: {
          /* Any autoprefixer options: https://github.com/postcss/autoprefixer#options */
        },
        stage: 3 /* Any valid stages: https://cssdb.org/#staging-process. */,
        features: {
          /* Any CSS features: https://preset-env.cssdb.org/features. */
        },
      },
      loaderOptions: (postcssLoaderOptions, { env, paths }) => {
        return postcssLoaderOptions;
      },
    },
  },
  babel: {
    presets: [],
    plugins: [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-nullish-coalescing-operator",
    ],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      return babelLoaderOptions;
    },
  },
  typescript: {
    enableTypeChecking: true /* (default value)  */,
  },
  webpack: {
    alias: {},
    plugins: smp.wrap({
      add: [
        // Silence mini-css-extract-plugin generating lots of warnings for CSS ordering.
        // We use CSS(Less) modules that should not care for the order of CSS imports, so we
        // should be safe to ignore these.
        //
        // See: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
        new FilterWarningsPlugin({
          exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
        }),
        new WebpackBar({ profile: true }),
        ...(process.env.NODE_ENV === "development"
          ? [new BundleAnalyzerPlugin({ openAnalyzer: false })]
          : []),
      ] /* An array of plugins */,
      remove:
        [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
    }),
    // configure: (webpackConfig, { env, paths }) => {
    //   return webpackConfig;
    // },
    configure: (webpackConfig) => {
      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        (plugin) =>
          plugin && plugin.options && plugin.options.ignoreOrder != null
      );

      if (instanceOfMiniCssExtractPlugin) {
        instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
      }

      return webpackConfig;
    },
  },
  jest: {
    babel: {
      addPresets: true /* (default value) */,
      addPlugins: true /* (default value) */,
    },
    configure(config) {
      config.transformIgnorePatterns = [
        "/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$",
      ];
      config.testResultsProcessor = "jest-teamcity-reporter";
      return config;
    },
  },
  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
    return devServerConfig;
  },
  plugins: [
    {
      plugin: {
        overrideCracoConfig: ({
          cracoConfig,
          pluginOptions,
          context: { env, paths },
        }) => {
          return cracoConfig;
        },
        overrideWebpackConfig: ({
          webpackConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths },
        }) => {
          return webpackConfig;
        },
        overrideDevServerConfig: ({
          devServerConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths, proxy, allowedHost },
        }) => {
          return devServerConfig;
        },
        overrideJestConfig: ({
          jestConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths, resolve, rootDir },
        }) => {
          return jestConfig;
        },
      },
      options: {},
    },
    {
      plugin: CracoAntDesignPlugin,
      options: {
        cssLoaderOptions: {
          modules: {
            getLocalIdent: (context, localIdentName, localName, options) => {
              if (context.resourcePath.includes("node_modules")) {
                return localName;
              }
              return getCSSModuleLocalIdent(
                context,
                localIdentName,
                localName,
                options
              );
            },
          },
        },
        customizeThemeLessPath: path.join(__dirname, "src/Theme.less"),
      },
    },
  ],
};

package.json

"dependencies": {
    "@ant-design/icons": "4.7.0",
    "@tinymce/tinymce-react": "3.14.0",
    "antd": "4.18.5",
    "axios": "0.24.0",
    "axios-rate-limit": "1.3.0",
    "classnames": "2.3.1",
    "color-hash": "2.0.1",
    "craco-less": "1.20.0",
    "cross-var": "1.1.0",
    "fast-deep-equal": "3.1.3",
    "html-to-image": "1.9.0",
    "javascript-priority-queue": "1.0.0",
    "jest-canvas-mock": "2.3.1",
    "jest-junit": "14.0.1",
    "leaflet": "1.7.1",
    "leaflet-geosearch": "3.6.1",
    "leaflet-gesture-handling": "1.2.2",
    "leaflet-groupedlayercontrol": "0.6.1",
    "leaflet.fullscreen": "2.3.0",
    "less": "4.1.3",
    "less-loader": "10.2.0",
    "moment": "2.29.3",
    "moment-timezone": "0.5.34",
    "p-limit": "3.1.0",
    "plotly.js": "2.8.3",
    "plotly.js-finance-dist-min": "2.12.1",
    "postcss-less": "6.0.0",
    "prop-types": "latest",
    "qrcode.react": "3.1.0",
    "qs": "6.10.1",
    "react": "17.0.2",
    "react-csv": "2.2.2",
    "react-datasheet": "1.4.9",
    "react-dev-utils": "11.0.4",
    "react-dom": "17.0.2",
    "react-grid-layout": "1.3.1",
    "react-helmet": "6.1.0",
    "react-leaflet": "3.1.0",
    "react-leaflet-grouped-layer-control": "0.0.13",
    "react-measure": "2.5.2",
    "react-plotly.js": "2.5.1",
    "react-query": "3.34.15",
    "react-resizable": "3.0.4",
    "react-resize-aware": "3.1.1",
    "react-router-dom": "5.3.3",
    "react-scripts": "4.0.3",
    "react-sizeme": "3.0.2",
    "react-use": "17.3.2",
    "reconnecting-websocket": "4.4.0",
    "storybook-addon-mock": "2.4.1",
    "storybook-addon-state": "1.0.3",
    "web-vitals": "2.1.3",
    "xlsx": "0.17.5",
    "zxcvbn": "4.4.2"
  },
"devDependencies": {
    "@craco/craco": "6.4.3",
    "@storybook/addon-actions": "6.4.22",
    "@storybook/addon-docs": "6.4.22",
    "@storybook/addon-essentials": "6.4.22",
    "@storybook/addon-interactions": "6.4.22",
    "@storybook/addon-links": "6.4.22",
    "@storybook/node-logger": "6.4.22",
    "@storybook/preset-create-react-app": "4.1.0",
    "@storybook/react": "6.4.22",
    "@storybook/testing-library": "0.0.13",
    "@testing-library/dom": "8.14.0",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "12.1.5",
    "@testing-library/react-hooks": "8.0.1",
    "@testing-library/user-event": "13.5.0",
    "@types/jest": "29.1.1",
    "@types/node": "18.11.9",
    "@types/plotly.js": "1.54.22",
    "@types/react": "17.0.47",
    "@types/react-csv": "1.1.3",
    "@types/react-dom": "17.0.17",
    "@types/react-grid-layout": "1.3.0",
    "@types/react-helmet": "6.1.5",
    "@types/react-infinite-scroller": "1.2.3",
    "@types/react-plotly.js": "2.5.1",
    "@types/react-router-dom": "5.3.3",
    "@types/webpack-env": "1.17.0",
    "axios-mock-adapter": "1.20.0",
    "craco-antd": "1.19.0",
    "craco-image-optimizer-plugin": "0.0.5",
    "cross-env": "7.0.3",
    "danger": "11.0.7",
    "dotenv": "16.0.1",
    "dotenv-cli": "6.0.0",
    "env-cmd": "10.1.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-react-hooks": "4.5.0",
    "eslint-plugin-sonarjs": "0.13.0",
    "eslint-plugin-storybook": "0.5.12",
    "husky": "8.0.1",
    "jest-teamcity-reporter": "github:mhodgson/jest-teamcity-reporter",
    "lint-staged": "13.0.3",
    "mq-polyfill": "1.1.8",
    "netlify-cli": "12.0.7",
    "node-fetch": "3.2.6",
    "nodemon": "2.0.18",
    "npm-run-all": "4.1.5",
    "openapi-typescript-codegen": "0.22.0",
    "prettier": "2.6.2",
    "react-docgen-typescript-plugin": "1.0.1",
    "react-test-renderer": "17.0.2",
    "run-script-os": "github:jamesmstone/run-script-os",
    "source-map-explorer": "2.5.2",
    "speed-measure-webpack-plugin": "1.5.0",
    "storybook-addon-designs": "6.2.1",
    "storybook-preset-craco": "0.0.6",
    "stylelint": "14.8.5",
    "stylelint-config-prettier": "9.0.3",
    "stylelint-config-standard": "24.0.0",
    "stylelint-prettier": "2.0.0",
    "typescript": "4.6.4",
    "webpack-bundle-analyzer": "4.5.0",
    "webpack-filter-warnings-plugin": "1.2.1",
    "webpackbar": "5.0.2",
    "workbox-background-sync": "6.5.3",
    "workbox-broadcast-update": "6.5.3",
    "workbox-cacheable-response": "6.5.3",
    "workbox-core": "6.5.3",
    "workbox-expiration": "6.5.3",
    "workbox-google-analytics": "6.5.3",
    "workbox-navigation-preload": "6.5.3",
    "workbox-precaching": "6.5.3",
    "workbox-range-requests": "6.5.3",
    "workbox-routing": "6.5.3",
    "workbox-strategies": "6.5.3",
    "workbox-streams": "6.5.3"
  },

Additional information
(anything else that could be useful for us to help you solve your problem)

[songyot11]

👀

[songyot11]

npm install --save-dev identity-obj-proxy

// .package.json

 "jest": {
    "moduleNameMapper": {
      "\\.(s?css|less)$": "identity-obj-proxy"
    }
  }