How to use baseWebpackConfig method in storybook-root

Best JavaScript code snippet using storybook-root

framework-preset-angular-cli.test.ts

Source:framework-preset-angular-cli.test.ts

1import path from 'path';2import type { Configuration } from 'webpack';3import { logger } from '@storybook/node-logger';4import { normalize, getSystemPath } from '@angular-devkit/core';5import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';6import { webpackFinal } from './framework-preset-angular-cli';7import type { PresetOptions } from './preset-options';8const testPath = __dirname;9let workspaceRoot = testPath;10let cwdSpy: jest.SpyInstance;11beforeEach(() => {12  cwdSpy = jest.spyOn(process, 'cwd');13  jest.spyOn(logger, 'error').mockImplementation();14  jest.spyOn(logger, 'info').mockImplementation();15});16afterEach(() => {17  jest.clearAllMocks();18});19function initMockWorkspace(name: string) {20  workspaceRoot = path.join(__dirname, '__mocks-ng-workspace__', name);21  cwdSpy.mockReturnValue(workspaceRoot);22}23describe('framework-preset-angular-cli', () => {24  let options: PresetOptions;25  beforeEach(() => {26    options = {} as PresetOptions;27  });28  describe('without angular.json', () => {29    let consoleErrorSpy: jest.SpyInstance;30    beforeEach(() => {31      initMockWorkspace('');32      consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();33    });34    it('should return webpack base config and display log error', async () => {35      const webpackBaseConfig = newWebpackConfiguration();36      const config = await webpackFinal(webpackBaseConfig, options);37      expect(logger.info).toHaveBeenCalledWith(38        '=> Loading angular-cli config for angular lower than 12.2.0'39      );40      expect(logger.error).toHaveBeenCalledWith(41        `=> Could not find angular workspace config (angular.json) on this path "${workspaceRoot}"`42      );43      expect(config).toEqual(webpackBaseConfig);44    });45  });46  describe("when angular.json haven't projects entry", () => {47    beforeEach(() => {48      initMockWorkspace('without-projects-entry');49    });50    it('should return webpack base config and display log error', async () => {51      const webpackBaseConfig = newWebpackConfiguration();52      const config = await webpackFinal(webpackBaseConfig, options);53      expect(logger.info).toHaveBeenCalledWith(54        '=> Loading angular-cli config for angular lower than 12.2.0'55      );56      expect(logger.error).toHaveBeenCalledWith(57        '=> Could not find angular project: No angular projects found'58      );59      expect(logger.info).toHaveBeenCalledWith(60        '=> Fail to load angular-cli config. Using base config'61      );62      expect(config).toEqual(webpackBaseConfig);63    });64  });65  describe('when angular.json have empty projects entry', () => {66    beforeEach(() => {67      initMockWorkspace('empty-projects-entry');68    });69    it('should return webpack base config and display log error', async () => {70      const webpackBaseConfig = newWebpackConfiguration();71      const config = await webpackFinal(webpackBaseConfig, options);72      expect(logger.info).toHaveBeenCalledWith(73        '=> Loading angular-cli config for angular lower than 12.2.0'74      );75      expect(logger.error).toHaveBeenCalledWith(76        '=> Could not find angular project: No angular projects found'77      );78      expect(logger.info).toHaveBeenCalledWith(79        '=> Fail to load angular-cli config. Using base config'80      );81      expect(config).toEqual(webpackBaseConfig);82    });83  });84  describe('when angular.json does not have a compatible project', () => {85    beforeEach(() => {86      initMockWorkspace('without-compatible-projects');87    });88    it('should return webpack base config and display log error', async () => {89      const webpackBaseConfig = newWebpackConfiguration();90      const config = await webpackFinal(webpackBaseConfig, options);91      expect(logger.info).toHaveBeenCalledWith(92        '=> Loading angular-cli config for angular lower than 12.2.0'93      );94      expect(logger.error).toHaveBeenCalledWith(95        '=> Could not find angular project: "missing-project" project is not found in angular.json'96      );97      expect(logger.info).toHaveBeenCalledWith(98        '=> Fail to load angular-cli config. Using base config'99      );100      expect(config).toEqual(webpackBaseConfig);101    });102  });103  describe('when angular.json have projects without architect.build', () => {104    beforeEach(() => {105      initMockWorkspace('without-architect-build');106    });107    it('should return webpack base config and display log error', async () => {108      const webpackBaseConfig = newWebpackConfiguration();109      const config = await webpackFinal(webpackBaseConfig, options);110      expect(logger.info).toHaveBeenCalledWith(111        '=> Loading angular-cli config for angular lower than 12.2.0'112      );113      expect(logger.error).toHaveBeenCalledWith(114        '=> Could not find angular project: "build" target is not found in "foo-project" project'115      );116      expect(logger.info).toHaveBeenCalledWith(117        '=> Fail to load angular-cli config. Using base config'118      );119      expect(config).toEqual(webpackBaseConfig);120    });121  });122  describe('when angular.json have projects without architect.build.options', () => {123    beforeEach(() => {124      initMockWorkspace('without-architect-build-options');125    });126    it('throws error', async () => {127      await expect(() => webpackFinal(newWebpackConfiguration(), options)).rejects.toThrowError(128        'Missing required options in project target. Check "tsConfig"'129      );130      expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`);131    });132  });133  describe('when angular.json have minimal config', () => {134    beforeEach(() => {135      initMockWorkspace('minimal-config');136    });137    it('should log', async () => {138      const baseWebpackConfig = newWebpackConfiguration();139      await webpackFinal(baseWebpackConfig, options);140      expect(logger.info).toHaveBeenCalledTimes(3);141      expect(logger.info).toHaveBeenNthCalledWith(142        1,143        '=> Loading angular-cli config for angular lower than 12.2.0'144      );145      expect(logger.info).toHaveBeenNthCalledWith(146        2,147        '=> Using angular project "foo-project:build" for configuring Storybook'148      );149      expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');150    });151    it('should extends webpack base config', async () => {152      const baseWebpackConfig = newWebpackConfiguration();153      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);154      expect(webpackFinalConfig).toEqual({155        ...baseWebpackConfig,156        module: { ...baseWebpackConfig.module, rules: expect.anything() },157        plugins: expect.anything(),158        resolve: {159          ...baseWebpackConfig.resolve,160          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),161          // the base resolve.plugins are not kept ð¤·ââï¸162          plugins: expect.arrayContaining([163            expect.objectContaining({164              absoluteBaseUrl: expect.any(String),165            } as TsconfigPathsPlugin),166          ]),167        },168        resolveLoader: expect.anything(),169      });170    });171    it('should set webpack "module.rules"', async () => {172      const baseWebpackConfig = newWebpackConfiguration();173      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);174      const expectedRules: any = [175        {176          oneOf: [177            {178              exclude: [],179              use: expect.anything(),180            },181            {182              include: [],183              use: expect.anything(),184            },185          ],186        },187        { use: expect.anything() },188      ];189      expect(webpackFinalConfig.module.rules).toEqual([190        {191          test: /\.(?:css)$/i,192          rules: expectedRules,193        },194        {195          test: /\.(?:scss)$/i,196          rules: expectedRules,197        },198        {199          test: /\.(?:sass)$/i,200          rules: expectedRules,201        },202        {203          test: /\.(?:less)$/i,204          rules: expectedRules,205        },206        {207          test: /\.(?:styl)$/i,208          rules: expectedRules,209        },210        { mimetype: 'text/css', use: expect.anything() },211        { mimetype: 'text/x-scss', use: expect.anything() },212        { mimetype: 'text/x-sass', use: expect.anything() },213        { mimetype: 'text/x-less', use: expect.anything() },214        { mimetype: 'text/x-stylus', use: expect.anything() },215        ...baseWebpackConfig.module.rules,216      ]);217    });218    it('should set webpack "plugins"', async () => {219      const baseWebpackConfig = newWebpackConfiguration();220      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);221      expect(webpackFinalConfig.plugins).toMatchInlineSnapshot(`222        Array [223          AnyComponentStyleBudgetChecker {224            "budgets": Array [],225          },226          Object {227            "apply": [Function],228          },229          ContextReplacementPlugin {230            "newContentCreateContextMap": [Function],231            "newContentResource": "/Users/shilman/projects/baseline/storybook/app/angular/src/server/__mocks-ng-workspace__/minimal-config/$_lazy_route_resources",232            "resourceRegExp": /\\\\@angular\\(\\\\\\\\\\|\\\\/\\)core\\(\\\\\\\\\\|\\\\/\\)/,233          },234          DedupeModuleResolvePlugin {235            "modules": Map {},236            "options": Object {237              "verbose": undefined,238            },239          },240          Object {241            "keepBasePlugin": true,242          },243        ]244      `);245    });246    it('should set webpack "resolve.modules"', async () => {247      const baseWebpackConfig = newWebpackConfiguration();248      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);249      expect(webpackFinalConfig.resolve.modules).toEqual([250        ...baseWebpackConfig.resolve.modules,251        getSystemPath(normalize(path.join(workspaceRoot, 'src'))).replace(/\\/g, '/'),252      ]);253    });254    it('should replace webpack "resolve.plugins"', async () => {255      const baseWebpackConfig = newWebpackConfiguration();256      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);257      expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(`258        Array [259          TsconfigPathsPlugin {260            "absoluteBaseUrl": "`);261    });262  });263  describe('when angular.json have "options.styles" config', () => {264    beforeEach(() => {265      initMockWorkspace('with-options-styles');266    });267    it('should extends webpack base config', async () => {268      const baseWebpackConfig = newWebpackConfiguration();269      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);270      expect(webpackFinalConfig).toEqual({271        ...baseWebpackConfig,272        entry: [273          ...(baseWebpackConfig.entry as any[]),274          path.join(workspaceRoot, 'src', 'styles.css'),275          path.join(workspaceRoot, 'src', 'styles.scss'),276        ],277        module: { ...baseWebpackConfig.module, rules: expect.anything() },278        plugins: expect.anything(),279        resolve: {280          ...baseWebpackConfig.resolve,281          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),282          // the base resolve.plugins are not kept ð¤·ââï¸283          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),284        },285        resolveLoader: expect.anything(),286      });287    });288    it('should set webpack "module.rules"', async () => {289      const baseWebpackConfig = newWebpackConfiguration();290      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);291      const expectedRules = [292        {293          oneOf: [294            {295              exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],296              use: expect.anything(),297            },298            {299              include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],300              use: expect.anything(),301            },302          ],303        },304        { use: expect.anything() },305      ];306      expect(webpackFinalConfig.module.rules).toEqual([307        {308          test: /\.(?:css)$/i,309          rules: expectedRules,310        },311        {312          test: /\.(?:scss)$/i,313          rules: expectedRules,314        },315        {316          test: /\.(?:sass)$/i,317          rules: expectedRules,318        },319        {320          test: /\.(?:less)$/i,321          rules: expectedRules,322        },323        {324          test: /\.(?:styl)$/i,325          rules: expectedRules,326        },327        { mimetype: 'text/css', use: expect.anything() },328        { mimetype: 'text/x-scss', use: expect.anything() },329        { mimetype: 'text/x-sass', use: expect.anything() },330        { mimetype: 'text/x-less', use: expect.anything() },331        { mimetype: 'text/x-stylus', use: expect.anything() },332        ...baseWebpackConfig.module.rules,333      ]);334    });335  });336  describe('when angular.json haven\'t "options.tsConfig" config', () => {337    beforeEach(() => {338      initMockWorkspace('without-tsConfig');339    });340    it('throws error', async () => {341      await expect(() => webpackFinal(newWebpackConfiguration(), options)).rejects.toThrowError(342        'Missing required options in project target. Check "tsConfig"'343      );344      expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`);345    });346  });347  describe('when is a nx with angular.json', () => {348    beforeEach(() => {349      initMockWorkspace('with-nx');350    });351    it('should extends webpack base config', async () => {352      const baseWebpackConfig = newWebpackConfiguration();353      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);354      expect(webpackFinalConfig).toEqual({355        ...baseWebpackConfig,356        entry: [357          ...(baseWebpackConfig.entry as any[]),358          path.join(workspaceRoot, 'src', 'styles.css'),359          path.join(workspaceRoot, 'src', 'styles.scss'),360        ],361        module: { ...baseWebpackConfig.module, rules: expect.anything() },362        plugins: expect.anything(),363        resolve: {364          ...baseWebpackConfig.resolve,365          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),366          // the base resolve.plugins are not kept ð¤·ââï¸367          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),368        },369        resolveLoader: expect.anything(),370      });371    });372    it('should set webpack "module.rules"', async () => {373      const baseWebpackConfig = newWebpackConfiguration();374      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);375      const stylePaths = [376        path.join(workspaceRoot, 'src', 'styles.css'),377        path.join(workspaceRoot, 'src', 'styles.scss'),378      ];379      const expectedRules: any = [380        {381          oneOf: [382            {383              exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],384              use: expect.anything(),385            },386            {387              include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],388              use: expect.anything(),389            },390          ],391        },392        { use: expect.anything() },393      ];394      expect(webpackFinalConfig.module.rules).toEqual([395        {396          test: /\.(?:css)$/i,397          rules: expectedRules,398        },399        {400          test: /\.(?:scss)$/i,401          rules: expectedRules,402        },403        {404          test: /\.(?:sass)$/i,405          rules: expectedRules,406        },407        {408          test: /\.(?:less)$/i,409          rules: expectedRules,410        },411        {412          test: /\.(?:styl)$/i,413          rules: expectedRules,414        },415        { mimetype: 'text/css', use: expect.anything() },416        { mimetype: 'text/x-scss', use: expect.anything() },417        { mimetype: 'text/x-sass', use: expect.anything() },418        { mimetype: 'text/x-less', use: expect.anything() },419        { mimetype: 'text/x-stylus', use: expect.anything() },420        ...baseWebpackConfig.module.rules,421      ]);422    });423  });424  describe('when is a nx with workspace.json', () => {425    beforeEach(() => {426      initMockWorkspace('with-nx-workspace');427    });428    it('should extends webpack base config', async () => {429      const baseWebpackConfig = newWebpackConfiguration();430      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);431      expect(webpackFinalConfig).toEqual({432        ...baseWebpackConfig,433        entry: [434          ...(baseWebpackConfig.entry as any[]),435          path.join(workspaceRoot, 'src', 'styles.css'),436          path.join(workspaceRoot, 'src', 'styles.scss'),437        ],438        module: { ...baseWebpackConfig.module, rules: expect.anything() },439        plugins: expect.anything(),440        resolve: {441          ...baseWebpackConfig.resolve,442          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),443          // the base resolve.plugins are not kept ð¤·ââï¸444          plugins: expect.arrayContaining([445            expect.objectContaining({446              absoluteBaseUrl: expect.any(String),447            } as TsconfigPathsPlugin),448          ]),449        },450        resolveLoader: expect.anything(),451      });452    });453    it('should set webpack "module.rules"', async () => {454      const baseWebpackConfig = newWebpackConfiguration();455      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);456      const stylePaths = [457        path.join(workspaceRoot, 'src', 'styles.css'),458        path.join(workspaceRoot, 'src', 'styles.scss'),459      ];460      const expectedRules: any = [461        {462          oneOf: [463            {464              exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],465              use: expect.anything(),466            },467            {468              include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],469              use: expect.anything(),470            },471          ],472        },473        { use: expect.anything() },474      ];475      expect(webpackFinalConfig.module.rules).toEqual([476        {477          test: /\.(?:css)$/i,478          rules: expectedRules,479        },480        {481          test: /\.(?:scss)$/i,482          rules: expectedRules,483        },484        {485          test: /\.(?:sass)$/i,486          rules: expectedRules,487        },488        {489          test: /\.(?:less)$/i,490          rules: expectedRules,491        },492        {493          test: /\.(?:styl)$/i,494          rules: expectedRules,495        },496        { mimetype: 'text/css', use: expect.anything() },497        { mimetype: 'text/x-scss', use: expect.anything() },498        { mimetype: 'text/x-sass', use: expect.anything() },499        { mimetype: 'text/x-less', use: expect.anything() },500        { mimetype: 'text/x-stylus', use: expect.anything() },501        ...baseWebpackConfig.module.rules,502      ]);503    });504  });505  describe('when angular.json have only one lib project', () => {506    beforeEach(() => {507      initMockWorkspace('with-lib');508    });509    it('should extends webpack base config', async () => {510      const baseWebpackConfig = newWebpackConfiguration();511      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);512      expect(webpackFinalConfig).toEqual({513        ...baseWebpackConfig,514        entry: [...(baseWebpackConfig.entry as any[])],515        module: { ...baseWebpackConfig.module, rules: expect.anything() },516        plugins: expect.anything(),517        resolve: {518          ...baseWebpackConfig.resolve,519          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),520          // the base resolve.plugins are not kept ð¤·ââï¸521          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),522        },523        resolveLoader: expect.anything(),524      });525    });526    it('should set webpack "module.rules"', async () => {527      const baseWebpackConfig = newWebpackConfiguration();528      const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);529      const expectedRules: any = [530        {531          oneOf: [532            {533              exclude: [],534              use: expect.anything(),535            },536            {537              include: [],538              use: expect.anything(),539            },540          ],541        },542        { use: expect.anything() },543      ];544      expect(webpackFinalConfig.module.rules).toEqual([545        {546          test: /\.(?:css)$/i,547          rules: expectedRules,548        },549        {550          test: /\.(?:scss)$/i,551          rules: expectedRules,552        },553        {554          test: /\.(?:sass)$/i,555          rules: expectedRules,556        },557        {558          test: /\.(?:less)$/i,559          rules: expectedRules,560        },561        {562          test: /\.(?:styl)$/i,563          rules: expectedRules,564        },565        { mimetype: 'text/css', use: expect.anything() },566        { mimetype: 'text/x-scss', use: expect.anything() },567        { mimetype: 'text/x-sass', use: expect.anything() },568        { mimetype: 'text/x-less', use: expect.anything() },569        { mimetype: 'text/x-stylus', use: expect.anything() },570        ...baseWebpackConfig.module.rules,571      ]);572    });573  });574  describe('when angular.json have some config', () => {575    beforeEach(() => {576      initMockWorkspace('some-config');577    });578    it('should log', async () => {579      const baseWebpackConfig = newWebpackConfiguration();580      await webpackFinal(baseWebpackConfig, options);581      expect(logger.info).toHaveBeenCalledTimes(3);582      expect(logger.info).toHaveBeenNthCalledWith(583        1,584        '=> Loading angular-cli config for angular lower than 12.2.0'585      );586      expect(logger.info).toHaveBeenNthCalledWith(587        2,588        '=> Using angular project "foo-project:build" for configuring Storybook'589      );590      expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');591    });592  });593  describe('with angularBrowserTarget option', () => {594    beforeEach(() => {595      initMockWorkspace('with-angularBrowserTarget');596      options = { angularBrowserTarget: 'target-project:target-build' } as PresetOptions;597    });598    it('should log', async () => {599      const baseWebpackConfig = newWebpackConfiguration();600      await webpackFinal(baseWebpackConfig, options);601      expect(logger.info).toHaveBeenCalledTimes(3);602      expect(logger.info).toHaveBeenNthCalledWith(603        1,604        '=> Loading angular-cli config for angular lower than 12.2.0'605      );606      expect(logger.info).toHaveBeenNthCalledWith(607        2,608        '=> Using angular project "target-project:target-build" for configuring Storybook'609      );610      expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');611    });612  });613  describe('with angularBrowserTarget option with configuration', () => {614    beforeEach(() => {615      initMockWorkspace('with-angularBrowserTarget');616    });617    describe('when angular.json have the target without "configurations" section', () => {618      beforeEach(() => {619        options = {620          angularBrowserTarget: 'no-confs-project:target-build:target-conf',621        } as PresetOptions;622      });623      it('throws error', async () => {624        await expect(() => webpackFinal(newWebpackConfiguration(), options)).rejects.toThrowError(625          'Missing "configurations" section in project target'626        );627        expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`);628      });629    });630    describe('when angular.json have the target without required configuration', () => {631      beforeEach(() => {632        options = {633          angularBrowserTarget: 'no-target-conf-project:target-build:target-conf',634        } as PresetOptions;635      });636      it('throws error', async () => {637        await expect(() => webpackFinal(newWebpackConfiguration(), options)).rejects.toThrowError(638          'Missing required configuration in project target. Check "target-conf"'639        );640        expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`);641      });642    });643    describe('when angular.json have the target with required configuration', () => {644      beforeEach(() => {645        options = {646          angularBrowserTarget: 'target-project:target-build:target-conf',647        } as PresetOptions;648      });649      it('should log', async () => {650        const baseWebpackConfig = newWebpackConfiguration();651        await webpackFinal(baseWebpackConfig, options);652        expect(logger.info).toHaveBeenCalledTimes(3);653        expect(logger.info).toHaveBeenNthCalledWith(654          1,655          '=> Loading angular-cli config for angular lower than 12.2.0'656        );657        expect(logger.info).toHaveBeenNthCalledWith(658          2,659          '=> Using angular project "target-project:target-build:target-conf" for configuring Storybook'660        );661        expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');662      });663      it('should extends webpack base config', async () => {664        const baseWebpackConfig = newWebpackConfiguration();665        const webpackFinalConfig = await webpackFinal(baseWebpackConfig, options);666        expect(webpackFinalConfig).toEqual({667          ...baseWebpackConfig,668          entry: [669            ...(baseWebpackConfig.entry as any[]),670            path.join(workspaceRoot, 'src', 'styles.css'),671          ],672          module: { ...baseWebpackConfig.module, rules: expect.anything() },673          plugins: expect.anything(),674          resolve: {675            ...baseWebpackConfig.resolve,676            modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),677            // the base resolve.plugins are not kept ð¤·ââï¸678            plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),679          },680          resolveLoader: expect.anything(),681        });682      });683    });684  });685  describe('with only tsConfig option', () => {686    beforeEach(() => {687      initMockWorkspace('without-projects-entry');688      options = {689        tsConfig: 'projects/pattern-lib/tsconfig.lib.json',690        angularBrowserTarget: null,691      } as PresetOptions;692    });693    it('should log', async () => {694      const baseWebpackConfig = newWebpackConfiguration();695      await webpackFinal(baseWebpackConfig, options);696      expect(logger.info).toHaveBeenCalledTimes(3);697      expect(logger.info).toHaveBeenNthCalledWith(698        1,699        '=> Loading angular-cli config for angular lower than 12.2.0'700      );701      expect(logger.info).toHaveBeenNthCalledWith(702        2,703        '=> Using default angular project with "tsConfig:projects/pattern-lib/tsconfig.lib.json"'704      );705      expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');706    });707  });708});709const newWebpackConfiguration = (710  transformer: (c: Configuration) => Configuration = (c) => c711): Configuration => {712  return transformer({713    name: 'preview',714    mode: 'development',715    bail: false,716    devtool: 'cheap-module-source-map',717    entry: [718      '/Users/joe/storybook/lib/core-server/dist/esm/globals/polyfills.js',719      '/Users/joe/storybook/lib/core-server/dist/esm/globals/globals.js',720      '/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js',721      '/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js',722      '/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js',723      '/Users/joe/storybook/addons/actions/dist/esm/preset/addDecorator.js-generated-other-entry.js',724      '/Users/joe/storybook/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js',725      '/Users/joe/storybook/addons/links/dist/esm/preset/addDecorator.js-generated-other-entry.js',726      '/Users/joe/storybook/addons/knobs/dist/esm/preset/addDecorator.js-generated-other-entry.js',727      '/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js',728      '/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js',729      '/Users/joe/storybook/addons/a11y/dist/esm/a11yRunner.js-generated-other-entry.js',730      '/Users/joe/storybook/addons/a11y/dist/esm/a11yHighlight.js-generated-other-entry.js',731      '/Users/joe/storybook/examples/angular-cli/.storybook/preview.ts-generated-config-entry.js',732      '/Users/joe/storybook/examples/angular-cli/.storybook/generated-stories-entry.js',733      '/Users/joe/storybook/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined',734    ],735    output: {736      path: '/Users/joe/storybook/examples/angular-cli/node_modules/.cache/storybook/public',737      filename: '[name].[hash].bundle.js',738      publicPath: '',739    },740    plugins: [{ keepBasePlugin: true } as any],741    module: {742      rules: [{ keepBaseRule: true } as any],743    },744    resolve: {745      extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],746      modules: ['node_modules'],747      mainFields: ['browser', 'main'],748      alias: {749        '@storybook/addons': '/Users/joe/storybook/lib/addons',750        '@storybook/api': '/Users/joe/storybook/lib/api',751        '@storybook/channels': '/Users/joe/storybook/lib/channels',752        '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',753        '@storybook/components': '/Users/joe/storybook/lib/components',754        '@storybook/core-events': '/Users/joe/storybook/lib/core-events',755        '@storybook/router': '/Users/joe/storybook/lib/router',756        '@storybook/theming': '/Users/joe/storybook/lib/theming',757        '@storybook/semver': '/Users/joe/storybook/node_modules/@storybook/semver',758        '@storybook/client-api': '/Users/joe/storybook/lib/client-api',759        '@storybook/client-logger': '/Users/joe/storybook/lib/client-logger',760        react: '/Users/joe/storybook/node_modules/react',761        'react-dom': '/Users/joe/storybook/node_modules/react-dom',762      },763      plugins: [{ keepBasePlugin: true } as any],764    },765    resolveLoader: { plugins: [] },766    optimization: {767      splitChunks: { chunks: 'all' },768      runtimeChunk: true,769      sideEffects: true,770      usedExports: true,771      concatenateModules: true,772      minimizer: [],773    },774    performance: { hints: false },775  });...

webpack.config.js

Source:webpack.config.js

1const path = require('path');2const baseWebpackConfig = require('../../../webpack.config');3const HtmlWebpackPlugin = require('html-webpack-plugin');4const MiniCssExtractPlugin = require('mini-css-extract-plugin');5baseWebpackConfig.mode = process.env.NODE_ENV || 'development';6baseWebpackConfig.context = __dirname;7baseWebpackConfig.entry = [8  'babel-polyfill',9  path.join(__dirname, 'index.js')10];11baseWebpackConfig.output = {12  path: path.resolve(__dirname, 'compiled'),13  libraryTarget: 'commonjs2'14};15for (const rule of baseWebpackConfig.module.rules) {16  if (rule.test.toString() === /\.s?css$/.toString()) {17    rule.loaders = [18      // This removes the CSS from the compiled components; we are not19      // currently doing anything with the resulting CSS, since it's20      // used in email bodies, this is just removing the CSS.21      MiniCssExtractPlugin.loader,22      'css-loader',23      'sass-loader'24    ];25  }26}27baseWebpackConfig.target = 'node';28baseWebpackConfig.plugins = (baseWebpackConfig.plugins || []).filter(29  (plugin) => !(plugin instanceof HtmlWebpackPlugin)30);31baseWebpackConfig.plugins.push(new MiniCssExtractPlugin());32if (!baseWebpackConfig.resolve) {33  baseWebpackConfig.resolve = {};34}35baseWebpackConfig.resolve.alias = Object.assign(36  {},37  baseWebpackConfig.resolve.alias,38  {39    '@@i18n': path.resolve(__dirname, '..', '..', '..', 'i18n'),40    '@@client': path.resolve(__dirname, '..', '..', '..', 'client')41  }42);43baseWebpackConfig.externals = [44  /node_modules/45];...

Using AI Code Generation

1module.exports = {2  stories: ['../src/**/*.stories.@(js|mdx)'],3  webpackFinal: async (config) => {4    config.module.rules.push({5      include: path.resolve(__dirname, '../'),6    });7    config.resolve.alias = {8      '@': path.resolve(__dirname, '../src'),9    };

Using AI Code Generation

1module.exports = {2  webpackFinal: async (config) => {3    config.resolve = baseWebpackConfig.resolve;4    return config;5  },6};7module.exports = {8  webpackFinal: async (config) => {9    config.resolve = baseWebpackConfig.resolve;10    return config;11  },12};13import { withKnobs } from '@storybook/addon-knobs';14import { addDecorator } from '@storybook/react';15import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';16import { withA11y } from '@storybook/addon-a11y';17addDecorator(withKnobs);18addDecorator(withA11y);19export const parameters = {20  viewport: {21  },22};23const path = require('path');24const baseWebpackConfig = require('storybook-root-alias').baseWebpackConfig;25module.exports = (baseConfig, env, defaultConfig) => {26  defaultConfig.resolve = baseWebpackConfig.resolve;27  return defaultConfig;28};

Using AI Code Generation

1module.exports = {2  webpackFinal: async (config, { configType }) => {3    config.module.rules.push({4      include: path.resolve(__dirname, '../'),5    });6    return config;7  },8};

Using AI Code Generation

1const path = require('path');2const { baseWebpackConfig } = require('storybook-root-config');3module.exports = async ({ config, mode }) => {4  const storybookBaseConfig = await baseWebpackConfig({5    storybookOptions: {6      configDir: path.resolve(__dirname, '../.storybook'),7      stories: ['../src/**/*.stories.(js|mdx)'],8    },9  });10  return storybookBaseConfig;11};

Using AI Code Generation

1const { baseWebpackConfig } = require('storybook-root-config');2module.exports = baseWebpackConfig;3"scripts": {4},5"devDependencies": {6}

Using AI Code Generation

1const path = require('path');2const rootConfig = require('storybook-root-config');3module.exports = rootConfig.baseWebpackConfig({4  configDir: path.resolve(__dirname, '../'),5});6module.exports = {7  stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],8  webpackFinal: async (config) => {9    config.module.rules = config.module.rules.filter(10      (f) => f.test.toString() !== '/\\.jsx?$/'11    );12    config.module.rules.push({13      test: /\.(ts|tsx)$/,14        {15          loader: require.resolve('babel-loader'),16          options: {17            presets: [require.resolve('babel-preset-react-app')],18          },19        },20        {21          loader: require.resolve('react-docgen-typescript-loader'),22        },23    });24    config.resolve.extensions.push('.ts', '.tsx');25    return config;26  },27};28import { addDecorator } from '@storybook/react';29import { withTests } from '@storybook/addon-jest';30import results from '../.jest-test-results.json';31addDecorator(32  withTests({33  })34);35import { addDecorator } from '@storybook/react';36import { withTests } from '@storybook/addon-jest';37import results from '../.jest-test-results.json';38addDecorator(39  withTests({40  })41);42import { addDecorator } from '@storybook/react';43import { withTests } from '@storybook/addon-jest';44import results from '../.jest-test-results.json';45addDecorator(46  withTests({47  })48);49import { addDecorator } from '@storybook/react';50import { withTests } from '@storybook/addon-jest';51import results from '../.jest-test-results.json';52addDecorator(53  withTests({54  })55);56import { addDecorator } from '@storybook/react';57import { withTests } from

Using AI Code Generation

1module.exports = (baseConfig, env, defaultConfig) => {2  const config = defaultConfig;3  config.module.rules.push({4  });5  return config;6};7{8  "scripts": {9  },10  "devDependencies": {11  },12  "dependencies": {13  }14}15{16  "scripts": {

Using AI Code Generation

1const path = require('path');2const rootConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');3const baseWebpackConfig = rootConfig.baseWebpackConfig;4const webpackConfig = baseWebpackConfig(path.resolve(__dirname, './'), {5  configDir: path.resolve(__dirname, './'),6});7module.exports = webpackConfig;8const path = require('path');9module.exports = {10  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],11  webpackFinal: async (config) => {12    const mergedConfig = {13      resolve: {14          path.resolve(__dirname, '../node_modules'),15          path.resolve(__dirname, '../src'),16      },17    };18    return mergedConfig;19  },20};21import { addDecorator } from '@storybook/react';22import { withInfo } from '@storybook/addon-info';23import { withKnobs } from '@storybook/addon-knobs';24import { withA11y } from '@storybook/addon-a11y';25addDecorator(withA11y);26addDecorator(withKnobs);27addDecorator(withInfo({ inline: true }));28import { addons } from '@storybook/addons';29import { themes } from '@storybook/theming';30addons.setConfig({31});32const path = require('path');33const rootConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');34const baseWebpackConfig = rootConfig.baseWebpackConfig;35const webpackConfig = baseWebpackConfig(path.resolve(__dirname, './'), {36  configDir: path.resolve(__dirname, './'),37});38module.exports = webpackConfig;

Using AI Code Generation

1const path = require('path');2const { baseWebpackConfig } = require('@storybook/react/dist/server/config/defaults/webpack.config.js');3const webpackConfig = baseWebpackConfig({configDir: path.resolve(__dirname, '../')}, {configType: 'DEVELOPMENT'});4module.exports = webpackConfig;5const path = require('path');6const webpackConfig = require('../test.js');7module.exports = {8  webpackFinal: async config => {9    return {10      module: { ...config.module, rules: webpackConfig.module.rules },11      resolve: { ...config.resolve, alias: webpackConfig.resolve.alias },12    };13  },14};15"scripts": {16  },17{18}19{20  "env": {21  },22  "parserOptions": {23    "ecmaFeatures": {24    },25  },26  "rules": {27  }28}

Using AI Code Generation

1const { baseWebpackConfig } = require('@storybook/react/dist/server/config/defaults/webpack.config.js');2const path = require('path');3module.exports = (baseConfig, env) => {4  const config = baseWebpackConfig(baseConfig, env);5  config.module.rules.push({6    test: /\.(ts|tsx)$/,7    loader: require.resolve('babel-loader'),8    options: {9      presets: [['react-app', { flow: false, typescript: true }]],10    },11  });12  config.resolve.extensions.push('.ts', '.tsx');13  config.resolve.alias = {14    '@': path.resolve(__dirname, '../src'),15  };16  return config;17};18module.exports = {19  webpackFinal: async (config) => {20    config.module.rules.push({21      test: /\.(ts|tsx)$/,22      loader: require.resolve('babel-loader'),23      options: {24        presets: [['react-app', { flow: false, typescript: true }]],25      },26    });27    config.resolve.extensions.push('.ts', '.tsx');28    config.resolve.alias = {29      '@': path.resolve(__dirname, '../src'),30    };31    return config;32  },33};34import React from 'react';35import { addDecorator } from '@storybook/react';36import { ThemeProvider } from '@material-ui/core/styles';37import theme from '../src/theme';38addDecorator((story) => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);39{40  "compilerOptions": {

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.