[WIP] Update Dependencies

.gitignore

@@ -10,7 +10,10 @@
 .DS_Store
 coverage
 .idea
-package-lock.json
 /test-results
 test-app/node_modules
 craco-antd-*.tgz
+
+# Cypress
+**/cypress/screenshots/
+**/cypress/videos/

.travis.yml

@@ -9,7 +9,7 @@ env:
 language: node_js
 
 node_js:
-  - "10"
+  - "20"
 
 cache:
   yarn: true
@@ -18,7 +18,7 @@ cache:
 
 script:
   - jest --coverage --testPathIgnorePatterns test-app
-  - yarn prettier --check "**/*.{js,jsx,json,css,scss,html,md,yml}"
-  - yarn eslint --ext .js lib/
-  - yarn audit
+  - cd test-app && yarn test && yarn e2e && cd ..
+  - npm prettier --check "**/*.{js,jsx,json,css,scss,html,md,yml}"
+  - npm eslint --ext .js lib/
   - cat ./coverage/lcov.info | coveralls

jest.config.js

@@ -1,180 +1,6 @@
-// For a detailed explanation regarding each configuration property, visit:
-// https://jestjs.io/docs/en/configuration.html
-
 module.exports = {
-  // All imported modules in your tests should be mocked automatically
-  // automock: false,
-
-  // Stop running tests after the first failure
-  // bail: false,
-
-  // Respect "browser" field in package.json when resolving modules
-  // browser: false,
-
-  // The directory where Jest should store its cached dependency information
-  // cacheDirectory: "/var/folders/9t/hpqz7_5s27dc8_j_2hd7p_7h0000gn/T/jest_dx",
-
-  // Automatically clear mock calls and instances between every test
   clearMocks: true,
-
-  // Indicates whether the coverage information should be collected while executing the test
   collectCoverage: true,
-
-  // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: null,
-
-  // The directory where Jest should output its coverage files
-  // coverageDirectory: null,
-
-  // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
-
-  // A list of reporter names that Jest uses when writing coverage reports
-  // coverageReporters: [
-  //   "json",
-  //   "text",
-  //   "lcov",
-  //   "clover"
-  // ],
-
-  // An object that configures minimum threshold enforcement for coverage results
-  // coverageThreshold: null,
-
-  // Make calling deprecated APIs throw helpful error messages
-  // errorOnDeprecated: false,
-
-  // Force coverage collection from ignored files usin a array of glob patterns
-  // forceCoverageMatch: [],
-
-  // A path to a module which exports an async function that is triggered once before all test suites
-  // globalSetup: null,
-
-  // A path to a module which exports an async function that is triggered once after all test suites
-  // globalTeardown: null,
-
-  // A set of global variables that need to be available in all test environments
-  // globals: {},
-
-  // An array of directory names to be searched recursively up from the requiring module's location
-  // moduleDirectories: [
-  //   "node_modules"
-  // ],
-
-  // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "json",
-  //   "jsx",
-  //   "node"
-  // ],
-
-  // A map from regular expressions to module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
-
-  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
-  // modulePathIgnorePatterns: [],
-
-  // Activates notifications for test results
-  // notify: false,
-
-  // An enum that specifies notification mode. Requires { notify: true }
-  // notifyMode: "always",
-
-  // A preset that is used as a base for Jest's configuration
-  // preset: null,
-
-  // Run tests from one or more projects
-  // projects: null,
-
-  // Use this configuration option to add custom reporters to Jest
-  // reporters: undefined,
-
-  // Automatically reset mock state between every test
-  // resetMocks: false,
-
-  // Reset the module registry before running each individual test
-  // resetModules: false,
-
-  // A path to a custom resolver
-  // resolver: null,
-
-  // Automatically restore mock state between every test
-  // restoreMocks: false,
-
-  // The root directory that Jest should scan for tests and modules within
-  // rootDir: null,
-
-  // A list of paths to directories that Jest should use to search for files in
-  // roots: [
-  //   "<rootDir>"
-  // ],
-
-  // Allows you to use a custom runner instead of Jest's default test runner
-  // runner: "jest-runner",
-
-  // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
-
-  // The path to a module that runs some code to configure or set up the testing framework before each test
-  // setupTestFrameworkScriptFile: null,
-
-  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  // snapshotSerializers: [],
-
-  // The test environment that will be used for testing
   testEnvironment: "node",
-
-  // Options that will be passed to the testEnvironment
-  // testEnvironmentOptions: {},
-
-  // Adds a location field to test results
-  // testLocationInResults: false,
-
-  // The glob patterns Jest uses to detect test files
-  // testMatch: [
-  //   "**/__tests__/**/*.js?(x)",
-  //   "**/?(*.)+(spec|test).js?(x)"
-  // ],
-
-  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  // testPathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
-
-  // The regexp pattern Jest uses to detect test files
-  // testRegex: "",
-
-  // This option allows the use of a custom results processor
-  // testResultsProcessor: null,
-
-  // This option allows use of a custom test runner
-  // testRunner: "jasmine2",
-
-  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
-  // testURL: "http://localhost",
-
-  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
-  // timers: "real",
-
-  // A map from regular expressions to paths to transformers
-  // transform: null,
-
-  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
-
-  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
-  // unmockedModulePathPatterns: undefined,
-
-  // Indicates whether each individual test should be reported during the run
-  // verbose: null,
-
-  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
-  // watchPathIgnorePatterns: [],
-
-  // Whether to use watchman for file crawling
-  // watchman: true,
+  testPathIgnorePatterns: ["/node_modules/", "/test-app/"],
 };

lib/craco-antd.dev.test.js

@@ -5,11 +5,8 @@ const {
 } = require("@craco/craco/dist/lib/features/webpack/merge-webpack-config");
 const {
   applyCracoConfigPlugins,
-  applyWebpackConfigPlugins,
 } = require("@craco/craco/dist/lib/features/plugins");
 
-const clone = require("clone");
-
 const { craPaths, loadWebpackDevConfig } = require("@craco/craco/dist/lib/cra");
 
 const context = { env: "development", paths: craPaths };
@@ -32,7 +29,7 @@ beforeEach(() => {
     });
     process.env.NODE_ENV = "test";
   }
-  webpackConfig = clone(originalWebpackConfig);
+  webpackConfig = { ...originalWebpackConfig };
 });
 
 const applyCracoConfigAndOverrideWebpack = (cracoConfig) => {
@@ -46,7 +43,7 @@ test("the webpack config is modified correctly with all options and Less vars",
       "@less-loader-options-priority: #000;",
       "@customize-theme-priority: #000;",
       "@antd-customize-json-priority: #fff;",
-    ].join("\n")
+    ].join("\n"),
   );
 
   applyCracoConfigAndOverrideWebpack({
@@ -102,7 +99,7 @@ test("the webpack config is modified correctly with all options and Less vars",
   expect(oneOfRules).not.toBeUndefined();
 
   const jsRule = oneOfRules.oneOf.find(
-    (r) => r.test && r.test.toString() === "/\\.(js|mjs|jsx|ts|tsx)$/"
+    (r) => r.test && r.test.toString() === "/\\.(js|mjs|jsx|ts|tsx)$/",
   );
   expect(jsRule).not.toBeUndefined();
   expect(jsRule.options.plugins[1]).toEqual([
@@ -111,7 +108,7 @@ test("the webpack config is modified correctly with all options and Less vars",
   ]);
 
   const lessRule = oneOfRules.oneOf.find(
-    (r) => r.test && r.test.toString() === "/\\.less$/"
+    (r) => r.test && r.test.toString() === "/\\.less$/",
   );
   expect(lessRule).not.toBeUndefined();
   expect(lessRule.use[0].loader).toContain(`${path.sep}style-loader`);
@@ -158,7 +155,7 @@ test("the webpack config is modified correctly when loading vars from JSON file"
       "@less-loader-options-priority": "#000",
       "@customize-theme-priority": "#000",
       "@antd-customize-json-priority": "#fff",
-    })
+    }),
   );
 
   applyCracoConfigAndOverrideWebpack({
@@ -198,20 +195,21 @@ test("the webpack config is modified correctly when loading vars from JSON file"
   expect(oneOfRules).not.toBeUndefined();
 
   const jsRule = oneOfRules.oneOf.find(
-    (r) => r.test && r.test.toString() === "/\\.(js|mjs|jsx|ts|tsx)$/"
+    (r) => r.test && r.test.toString() === "/\\.(js|mjs|jsx|ts|tsx)$/",
   );
   expect(jsRule).not.toBeUndefined();
   expect(jsRule.options.plugins[1]).toEqual([
     "import",
-    { libraryName: "antd", libraryDirectory: "lib", style: true },
+    { libraryName: "antd", libraryDirectory: "es", style: true },
   ]);
 
   const lessRule = oneOfRules.oneOf.find(
-    (r) => r.test && r.test.toString() === "/\\.less$/"
+    (r) => r.test && r.test.toString() === "/\\.less$/",
   );
   expect(lessRule).not.toBeUndefined();
   expect(lessRule.use[0].loader).toContain(`${path.sep}style-loader`);
   expect(lessRule.use[0].options).toEqual({
+    testOption: "test-value-development",
     sourceMaps: true,
   });
   expect(lessRule.use[1].loader).toContain(`${path.sep}css-loader`);
@@ -248,7 +246,7 @@ test("the webpack config is modified correctly when loading vars from JSON file"
 
 test("custom Less variables path", () => {
   mockReadLess.mockImplementation(() =>
-    ["@less-loader-options-priority: #000;"].join("\n")
+    ["@less-loader-options-priority: #000;"].join("\n"),
   );
   applyCracoConfigAndOverrideWebpack({
     plugins: [
@@ -270,7 +268,7 @@ test("custom JSON variables path", () => {
   mockReadJSON.mockImplementation(() =>
     JSON.stringify({
       "@less-loader-options-priority": "#000",
-    })
+    }),
   );
   applyCracoConfigAndOverrideWebpack({
     plugins: [
@@ -291,16 +289,16 @@ const runExpectationsForMinimalConfiguration = () => {
   const oneOfRules = webpackConfig.module.rules.find((r) => r.oneOf);
   expect(oneOfRules).not.toBeUndefined();
   const jsRule = oneOfRules.oneOf.find(
-    (r) => r.test && r.test.toString() === "/\\.(js|mjs|jsx|ts|tsx)$/"
+    (r) => r.test && r.test.toString() === "/\\.(js|mjs|jsx|ts|tsx)$/",
   );
   expect(jsRule).not.toBeUndefined();
   expect(jsRule.options.plugins[1]).toEqual([
     "import",
-    { libraryName: "antd", libraryDirectory: "lib", style: true },
+    { libraryName: "antd", libraryDirectory: "es", style: true },
   ]);
 
   const lessRule = oneOfRules.oneOf.find(
-    (r) => r.test && r.test.toString() === "/\\.less$/"
+    (r) => r.test && r.test.toString() === "/\\.less$/",
   );
   expect(lessRule).not.toBeUndefined();
 
@@ -318,7 +316,11 @@ const runExpectationsForMinimalConfiguration = () => {
   expect(lessRule.use[4].options).toEqual({
     lessOptions: {
       javascriptEnabled: true,
-      modifyVars: {},
+      modifyVars: {
+        "@antd-customize-json-priority": "#fff",
+        "@customize-theme-priority": "#fff",
+        "@less-loader-options-priority": "#fff",
+      },
     },
     sourceMap: true,
   });
@@ -350,6 +352,6 @@ test("invalid JSON in antd.customize.json", () => {
 
   expect(runTest).toThrowError(
     "Could not parse JSON in antd.customize.json!\n\n" +
-      "SyntaxError: Unexpected token t in JSON at position 2"
+      "SyntaxError: Unexpected token t in JSON at position 2",
   );
 });

lib/craco-antd.js

@@ -22,7 +22,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
 
   // Look for antd.customize.less in the project root
   const antdCustomVarsLess = module.exports.readAntdCustomizeLess(
-    pluginOptions.customizeThemeLessPath || `.${path.sep}antd.customize.less`
+    pluginOptions.customizeThemeLessPath || `.${path.sep}antd.customize.less`,
   );
   if (antdCustomVarsLess) {
     // Note: This isn't a Less parser, so it doesn't crash if the Less is invalid.
@@ -33,7 +33,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
   } else {
     // Look for antd.customize.json in the project root
     const antdCustomVarsJSON = module.exports.readAntdCustomizeJSON(
-      pluginOptions.customVarsJSONPath || `.${path.sep}antd.customize.json`
+      pluginOptions.customVarsJSONPath || `.${path.sep}antd.customize.json`,
     );
     if (antdCustomVarsJSON) {
       let antdCustomVars;
@@ -92,7 +92,7 @@ module.exports = {
     if (pluginOptions && pluginOptions.babelPluginImportOptions) {
       Object.assign(
         babelPluginImportOptions,
-        pluginOptions.babelPluginImportOptions
+        pluginOptions.babelPluginImportOptions,
       );
     }
     // Use `style: 'css'` to include the precompiled CSS.