Open thongchatbananacoding opened 1 year ago
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)
đź‘€
npm install --save-dev identity-obj-proxy
// .package.json "jest": { "moduleNameMapper": { "\\.(s?css|less)$": "identity-obj-proxy" } }
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
package.json
Additional information (anything else that could be useful for us to help you solve your problem)