Jest snapshot testing not showing custom classname
thongchatbananacoding opened this issue · comments
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"
}
}