diff --git a/lib/craco-antd.dev.test.js b/lib/craco-antd.dev.test.js index 7a17fc0..9b6c33a 100644 --- a/lib/craco-antd.dev.test.js +++ b/lib/craco-antd.dev.test.js @@ -4,8 +4,7 @@ const { mergeWebpackConfig } = require("@craco/craco/lib/features/webpack/merge-webpack-config"); const { - applyCracoConfigPlugins, - applyWebpackConfigPlugins + applyCracoConfigPlugins } = require("@craco/craco/lib/features/plugins"); const clone = require("clone"); @@ -25,13 +24,11 @@ beforeEach(() => { mockReadLess.mockImplementation(() => false); mockReadJSON.mockImplementation(() => false); - if (!originalWebpackConfig) { - process.env.NODE_ENV = "development"; - originalWebpackConfig = loadWebpackDevConfig({ - reactScriptsVersion: "react-scripts" - }); - process.env.NODE_ENV = "test"; - } + process.env.NODE_ENV = "development"; + + const cracoConfig = { reactScriptsVersion: "react-scripts" }; + originalWebpackConfig = + originalWebpackConfig || loadWebpackDevConfig(cracoConfig); webpackConfig = clone(originalWebpackConfig); }); @@ -91,9 +88,9 @@ test("the webpack config is modified correctly with all options and Less vars", ] }); - expect(mockReadLess.mock.calls.length).toBe(1); - expect(mockReadLess.mock.calls[0][0]).toBe(`.${path.sep}antd.customize.less`); - expect(mockReadJSON.mock.calls.length).toBe(0); + expect(mockReadLess).toBeCalledTimes(1); + expect(mockReadLess).toBeCalledWith(`.${path.sep}antd.customize.less`); + expect(mockReadJSON).toBeCalledTimes(0); const oneOfRules = webpackConfig.module.rules.find(r => r.oneOf); expect(oneOfRules).not.toBeUndefined(); @@ -184,10 +181,10 @@ test("the webpack config is modified correctly when loading vars from JSON file" ] }); - expect(mockReadLess.mock.calls.length).toBe(1); - expect(mockReadLess.mock.calls[0][0]).toBe(`.${path.sep}antd.customize.less`); - expect(mockReadJSON.mock.calls.length).toBe(1); - expect(mockReadJSON.mock.calls[0][0]).toBe(`.${path.sep}antd.customize.json`); + expect(mockReadLess).toBeCalledTimes(1); + expect(mockReadLess).toBeCalledWith(`.${path.sep}antd.customize.less`); + expect(mockReadJSON).toBeCalledTimes(1); + expect(mockReadJSON).toBeCalledWith(`.${path.sep}antd.customize.json`); const oneOfRules = webpackConfig.module.rules.find(r => r.oneOf); expect(oneOfRules).not.toBeUndefined(); @@ -254,9 +251,9 @@ test("custom Less variables path", () => { ] }); - expect(mockReadLess.mock.calls.length).toBe(1); - expect(mockReadLess.mock.calls[0][0]).toBe("./src/styles/antd.custom.less"); - expect(mockReadJSON.mock.calls.length).toBe(0); + expect(mockReadLess).toBeCalledTimes(1); + expect(mockReadLess).toBeCalledWith("./src/styles/antd.custom.less"); + expect(mockReadJSON).toBeCalledTimes(0); }); test("custom JSON variables path", () => { @@ -276,8 +273,8 @@ test("custom JSON variables path", () => { ] }); - expect(mockReadJSON.mock.calls.length).toBe(1); - expect(mockReadJSON.mock.calls[0][0]).toBe("./src/styles/antd.custom.json"); + expect(mockReadJSON).toBeCalledTimes(1); + expect(mockReadJSON).toBeCalledWith("./src/styles/antd.custom.json"); }); const runExpectationsForMinimalConfiguration = () => { @@ -344,3 +341,22 @@ test("invalid JSON in antd.customize.json", () => { "SyntaxError: Unexpected token t in JSON at position 2" ); }); + +test("when run within a test should use transpiled library and not include styles", () => { + mockReadLess.mockImplementation(() => ""); + + process.env.NODE_ENV = "test"; + applyCracoConfigAndOverrideWebpack({ + plugins: [{ plugin: CracoAntDesignPlugin }] + }); + + const oneOfRules = webpackConfig.module.rules.find(r => r.oneOf); + const jsRule = oneOfRules.oneOf.find( + 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" } + ]); +}); diff --git a/lib/craco-antd.js b/lib/craco-antd.js index dfc11e1..6361394 100644 --- a/lib/craco-antd.js +++ b/lib/craco-antd.js @@ -83,12 +83,19 @@ module.exports = { overrideCracoConfig: ({ cracoConfig }) => { if (!cracoConfig.babel) cracoConfig.babel = {}; if (!cracoConfig.babel.plugins) cracoConfig.babel.plugins = []; - // Use `style: 'css'` to include the precompiled CSS. - // `style: true` loads the original Less so that variables can be modified. - // See: https://github.com/DocSpring/craco-antd/issues/3 + const importConfig = + process.env.NODE_ENV === "test" + ? // Use the transpiled library in tests and don't include any styles + // See: https://github.com/DocSpring/craco-antd/issues/10 + { libraryDirectory: "lib" } + : // Use `style: 'css'` to include the precompiled CSS. + // `style: true` loads the original Less so that variables can be modified. + // See: https://github.com/DocSpring/craco-antd/issues/3 + { libraryDirectory: "es", style: true }; + cracoConfig.babel.plugins.push([ "import", - { libraryName: "antd", libraryDirectory: "es", style: true } + Object.assign({ libraryName: "antd" }, importConfig) ]); return cracoConfig; } diff --git a/lib/craco-antd.prod.test.js b/lib/craco-antd.prod.test.js index 3224c60..dd9782f 100644 --- a/lib/craco-antd.prod.test.js +++ b/lib/craco-antd.prod.test.js @@ -4,8 +4,7 @@ const { mergeWebpackConfig } = require("@craco/craco/lib/features/webpack/merge-webpack-config"); const { - applyCracoConfigPlugins, - applyWebpackConfigPlugins + applyCracoConfigPlugins } = require("@craco/craco/lib/features/plugins"); const clone = require("clone"); @@ -25,13 +24,11 @@ beforeEach(() => { mockReadLess.mockImplementation(() => false); mockReadJSON.mockImplementation(() => false); - if (!originalWebpackConfig) { - process.env.NODE_ENV = "production"; - originalWebpackConfig = loadWebpackProdConfig({ - reactScriptsVersion: "react-scripts" - }); - process.env.NODE_ENV = "test"; - } + process.env.NODE_ENV = "production"; + + const cracoConfig = { reactScriptsVersion: "react-scripts" }; + originalWebpackConfig = + originalWebpackConfig || loadWebpackProdConfig(cracoConfig); webpackConfig = clone(originalWebpackConfig); }); @@ -91,9 +88,9 @@ test("the webpack config is modified correctly with all options and Less vars", ] }); - expect(mockReadLess.mock.calls.length).toBe(1); - expect(mockReadLess.mock.calls[0][0]).toBe(`.${path.sep}antd.customize.less`); - expect(mockReadJSON.mock.calls.length).toBe(0); + expect(mockReadLess).toBeCalledTimes(1); + expect(mockReadLess).toBeCalledWith(`.${path.sep}antd.customize.less`); + expect(mockReadJSON).toBeCalledTimes(0); const oneOfRules = webpackConfig.module.rules.find(r => r.oneOf); expect(oneOfRules).not.toBeUndefined(); @@ -181,10 +178,10 @@ test("the webpack config is modified correctly when loading vars from JSON file" ] }); - expect(mockReadLess.mock.calls.length).toBe(1); - expect(mockReadLess.mock.calls[0][0]).toBe(`.${path.sep}antd.customize.less`); - expect(mockReadJSON.mock.calls.length).toBe(1); - expect(mockReadJSON.mock.calls[0][0]).toBe(`.${path.sep}antd.customize.json`); + expect(mockReadLess).toBeCalledTimes(1); + expect(mockReadLess).toBeCalledWith(`.${path.sep}antd.customize.less`); + expect(mockReadJSON).toBeCalledTimes(1); + expect(mockReadJSON).toBeCalledWith(`.${path.sep}antd.customize.json`); const oneOfRules = webpackConfig.module.rules.find(r => r.oneOf); expect(oneOfRules).not.toBeUndefined(); @@ -248,9 +245,9 @@ test("custom Less variables path", () => { ] }); - expect(mockReadLess.mock.calls.length).toBe(1); - expect(mockReadLess.mock.calls[0][0]).toBe("./src/styles/antd.custom.less"); - expect(mockReadJSON.mock.calls.length).toBe(0); + expect(mockReadLess).toBeCalledTimes(1); + expect(mockReadLess).toBeCalledWith("./src/styles/antd.custom.less"); + expect(mockReadJSON).toBeCalledTimes(0); }); test("custom JSON variables path", () => { @@ -270,8 +267,8 @@ test("custom JSON variables path", () => { ] }); - expect(mockReadJSON.mock.calls.length).toBe(1); - expect(mockReadJSON.mock.calls[0][0]).toBe("./src/styles/antd.custom.json"); + expect(mockReadJSON).toBeCalledTimes(1); + expect(mockReadJSON).toBeCalledWith("./src/styles/antd.custom.json"); }); const runExpectationsForMinimalConfiguration = () => {