@servicetitan/startup 22.19.0 → 22.21.0

package/src/cli/utils/__tests__/tcm.test.ts

@@ -1,6 +1,5 @@
+import { fs, vol } from 'memfs';
 import chokidar from 'chokidar';
-import fs from 'fs';
-import mockFS from 'mock-fs';
 
 import { getFolders, log } from '../../../utils';
 import * as sassModule from '../compile-sass';
@@ -8,6 +7,7 @@ import * as sassModule from '../compile-sass';
 import { styleExtensions } from '..';
 import { tcm, tcmWatch } from '../tcm';
 
+jest.mock('fs', () => fs);
 jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     getFolders: jest.fn(),
@@ -22,10 +22,11 @@ describe('[startup] Cli Utils', () => {
         jest.mocked(getFolders).mockReturnValue({ source, destination: undefined });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     function mockStylesModule(module: string, id = 'foo') {
-        mockFS({ [source]: { [module]: `.${id} { display: none; }` } });
+        const content = `.${id} { display: none; }`;
+        vol.fromJSON({ [`${source}/${module}`]: content });
     }
 
     function expectTypeDefinitions(module: string, id = 'foo') {
@@ -77,7 +78,7 @@ describe('[startup] Cli Utils', () => {
         beforeEach(() => {
             fsWatcher = { on: jest.fn() };
             watchSpy = jest.spyOn(chokidar, 'watch').mockReturnValue(fsWatcher as any);
-            mockFS({ [source]: {} });
+            vol.fromJSON({ [`${source}/foo.bar`]: '' });
         });
 
         const subject = () => tcmWatch();

package/src/cli/utils/__tests__/tsc.test.ts

@@ -1,14 +1,15 @@
 import execa from 'execa';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import { Package, getPackagesGraph, getTsConfig } from '../../../utils';
 import { createPackage } from '../../../__mocks__';
 
 import { tsc, tscWatch } from '../tsc';
 
+jest.mock('fs', () => fs);
 jest.mock('execa', () => jest.fn());
 jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
-    log: { info: jest.fn() }, // suppress test output
+    log: { info: jest.fn(), debug: jest.fn() }, // suppress test output
     getPackagesGraph: jest.fn(),
 }));
 
@@ -22,15 +23,13 @@ describe('[startup] Cli Utils', () => {
             createPackage({ name: 'foo', location: 'packages/foo' }),
             createPackage({ name: 'bar', location: 'packages/bar' }),
         ];
-        mockFS({
-            packages: {
-                foo: { 'tsconfig.json': JSON.stringify({}) },
-                bar: { 'tsconfig.json': JSON.stringify({}) },
-            },
+        vol.fromJSON({
+            'packages/foo/tsconfig.json': JSON.stringify({}),
+            'packages/bar/tsconfig.json': JSON.stringify({}),
         });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     describe(`${tsc.name}`, () => {
         const subject = async () => tsc(packages);

package/src/cli/utils/bundle.ts

@@ -12,6 +12,8 @@ import { Overrides, createWebpackConfig } from '../../webpack';
 interface Options {
     buildStat?: boolean;
     config?: string;
+    esbuild?: boolean;
+    experimentalBundlers?: boolean;
 }
 
 function getName() {
@@ -33,7 +35,7 @@ export async function bundle(options: Options = {}) {
     const mode = 'production';
     const fallback = `./${webpackProdConfigFileName}`;
     const config = readWebpackConfig({ ...options, fallback });
-    const { buildStat } = options;
+    const { buildStat, esbuild, experimentalBundlers } = options;
 
     const run = async (config: Configuration) => {
         const compiler = webpack(config);
@@ -55,6 +57,8 @@ export async function bundle(options: Options = {}) {
         process.stdout.write(stats.toString(config.stats) + '\n');
     };
 
+    const webpackOptions = { name, buildStat, esbuild, experimentalBundlers };
+
     if (isWebComponent()) {
         const webpackConfig: Overrides = {
             configuration: { ...config?.configuration, mode },
@@ -62,12 +66,12 @@ export async function bundle(options: Options = {}) {
         };
 
         return Promise.all([
-            run(createWebpackConfig(webpackConfig, { embed: true, name, buildStat })),
-            run(createWebpackConfig(webpackConfig, { name, buildStat })),
+            run(createWebpackConfig(webpackConfig, { embed: true, ...webpackOptions })),
+            run(createWebpackConfig(webpackConfig, webpackOptions)),
         ]);
     }
 
-    return run(config ?? createWebpackConfig({ configuration: { mode } }, { buildStat, name }));
+    return run(config ?? createWebpackConfig({ configuration: { mode } }, webpackOptions));
 }
 
 export async function bundleWatch(options: Options = {}) {
@@ -76,6 +80,7 @@ export async function bundleWatch(options: Options = {}) {
     const name = getName();
     const mode = 'development';
     const config = readWebpackConfig({ ...options, fallback: `./${webpackDevConfigFileName}` });
+    const { esbuild, experimentalBundlers } = options;
 
     const runServe = async ({ devServer = {}, ...config }: Configuration) => {
         const compiler = webpack(config);
@@ -118,12 +123,25 @@ export async function bundleWatch(options: Options = {}) {
         };
 
         return Promise.all([
-            run(createWebpackConfig(webpackConfig, { embed: true, name })),
-            runServe(createWebpackConfig(webpackConfig, { name })),
+            run(
+                createWebpackConfig(webpackConfig, {
+                    embed: true,
+                    name,
+                    esbuild,
+                    experimentalBundlers,
+                })
+            ),
+            runServe(createWebpackConfig(webpackConfig, { name, esbuild, experimentalBundlers })),
         ]);
     }
 
-    return runServe(config ?? createWebpackConfig({ configuration: { mode } }, { name }));
+    return runServe(
+        config ??
+            createWebpackConfig(
+                { configuration: { mode } },
+                { name, esbuild, experimentalBundlers }
+            )
+    );
 }
 
 function readWebpackConfig({ config, fallback }: Options & { fallback: string }) {

package/src/cli/utils/tsc.ts

@@ -12,15 +12,13 @@ export function tscWatch(packages: Package[]) {
 }
 
 async function transpile(packages: Package[], options: string[] = []) {
-    await execa(
-        'tsc',
-        [
-            '-b',
-            ...options,
-            ...collapsePackages(packages).map(({ location }) => getTsConfig(location)),
-        ],
-        { stdio: 'inherit' }
-    );
+    const args = [
+        '-b',
+        ...options,
+        ...collapsePackages(packages).map(({ location }) => getTsConfig(location)),
+    ];
+    log.debug('tsc', `Running tsc ${args.join(' ')}`);
+    await execa('tsc', args, { stdio: 'inherit' });
 }
 
 /**

package/src/utils/__tests__/get-configuration.test.ts

@@ -1,4 +1,7 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
+import WebpackDevServer from 'webpack-dev-server';
+import path from 'path';
+
 import {
     getConfiguration,
     getConfigurationSafe,
@@ -13,7 +16,8 @@ import {
     isStyleCheckDisabled,
     isWebComponent,
 } from '../get-configuration';
-import WebpackDevServer from 'webpack-dev-server';
+
+jest.mock('fs', () => fs);
 
 describe('[startup] Utils', () => {
     const packageJson = 'package.json';
@@ -23,7 +27,7 @@ describe('[startup] Utils', () => {
     }
 
     function mockPackageJson(content: Record<string, any> = {}) {
-        mockFS(packageJsonFS(content));
+        vol.fromJSON(packageJsonFS(content));
     }
 
     function itReturns(subject: Function, value: any) {
@@ -32,7 +36,7 @@ describe('[startup] Utils', () => {
 
     beforeEach(() => mockPackageJson());
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => jest.resetAllMocks());
 
     describe(`${getConfiguration.name}`, () => {
         let location: string | undefined;
@@ -56,7 +60,7 @@ describe('[startup] Utils', () => {
 
             beforeEach(() => {
                 location = 'packages/foo';
-                mockFS({ packages: { foo: { [packageJson]: JSON.stringify({ cli }) } } });
+                vol.fromJSON({ [`packages/foo/${packageJson}`]: JSON.stringify({ cli }) });
             });
 
             test("returns location's cli", () => {
@@ -65,7 +69,7 @@ describe('[startup] Utils', () => {
         });
 
         describe('with no package.json', () => {
-            beforeEach(() => mockFS({}));
+            beforeEach(() => vol.reset());
 
             test('throws error', () => {
                 expect(subject).toThrowError();
@@ -95,7 +99,7 @@ describe('[startup] Utils', () => {
 
             beforeEach(() => {
                 location = 'packages/foo';
-                mockFS({ packages: { foo: { [packageJson]: JSON.stringify({ cli }) } } });
+                vol.fromJSON({ [`packages/foo/${packageJson}`]: JSON.stringify({ cli }) });
             });
 
             test("returns location's cli", () => {
@@ -104,7 +108,7 @@ describe('[startup] Utils', () => {
         });
 
         describe('with no package.json', () => {
-            beforeEach(() => mockFS({}));
+            beforeEach(() => vol.reset());
 
             itReturns(subject, {});
         });
@@ -135,7 +139,7 @@ describe('[startup] Utils', () => {
             });
 
             describe('when "cli.webpack.proxy" is a path', () => {
-                const proxy = 'proxy.json';
+                const proxy = 'proxy.js';
                 const proxyConfig = { cli: { webpack: { ...webpack, proxy } } };
 
                 beforeEach(() => mockPackageJson(proxyConfig));
@@ -148,12 +152,14 @@ describe('[startup] Utils', () => {
 
                 describe('when file exists', () => {
                     beforeEach(() => {
-                        mockFS({
+                        vol.fromJSON({
                             ...packageJsonFS(proxyConfig),
                             [proxy]: JSON.stringify(webpack.proxy),
-                            // Need node_modules so Jest can require() json file
-                            // eslint-disable-next-line @typescript-eslint/naming-convention
-                            node_modules: mockFS.load('./node_modules'),
+                        });
+
+                        // Have to mock proxy.js because our fs is virtual, but require() is not
+                        jest.doMock(path.resolve('proxy.js'), () => webpack.proxy, {
+                            virtual: true,
                         });
                     });
 
@@ -265,7 +271,7 @@ describe('[startup] Utils', () => {
         describe('with a location', () => {
             beforeEach(() => {
                 location = 'packages/foo';
-                mockFS({ packages: { foo: { [packageJson]: JSON.stringify(trigger) } } });
+                vol.fromJSON({ [`packages/foo/${packageJson}`]: JSON.stringify(trigger) });
             });
 
             test("returns location's status", () => {

package/src/utils/__tests__/get-destination-folders.test.ts

@@ -1,9 +1,9 @@
-import fs from 'fs';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import { getPackages } from '../get-packages';
 
 import { getDestinationFolders } from '../get-destination-folders';
 
+jest.mock('fs', () => fs);
 jest.mock('../get-packages', () => ({ getPackages: jest.fn() }));
 
 describe('[startup] Utils', () => {
@@ -12,28 +12,26 @@ describe('[startup] Utils', () => {
 
         beforeEach(() => {
             locations = ['foo', 'bar'];
-            mockFS(packageFS(locations));
+            vol.fromJSON(packageFS(locations));
             jest.mocked(getPackages).mockImplementation((): any =>
                 locations.map(location => ({ location: `packages/${location}` }))
             );
         });
 
-        afterEach(() => mockFS.restore());
+        afterEach(() => vol.reset());
 
         const subject = () => getDestinationFolders();
 
         function packageFS(locations: string[]) {
             const packages = Object.fromEntries(
                 locations.map(location => [
-                    location,
-                    {
-                        'tsconfig.json': JSON.stringify({
-                            compilerOptions: { outDir: `${location}outDir` },
-                        }),
-                    },
+                    `packages/${location}/tsconfig.json`,
+                    JSON.stringify({
+                        compilerOptions: { outDir: `${location}outDir` },
+                    }),
                 ])
             );
-            return { packages };
+            return packages;
         }
 
         function expectedOutDirs(locations: string[]) {
@@ -45,7 +43,7 @@ describe('[startup] Utils', () => {
         });
 
         describe('when package has no tsconfig', () => {
-            beforeEach(() => mockFS(packageFS(locations.slice(1))));
+            beforeEach(() => fs.rmSync(`packages/${locations[0]}/tsconfig.json`));
 
             test('omits location from result', () => {
                 expect(subject()).toEqual(expectedOutDirs(locations.slice(1)));
@@ -54,7 +52,7 @@ describe('[startup] Utils', () => {
 
         describe('when tsconfig has no "outDir"', () => {
             beforeEach(() => {
-                fs.writeFileSync(`packages/${locations[0]}/tsconfig.json`, JSON.stringify({}));
+                vol.fromJSON({ [`packages/${locations[0]}/tsconfig.json`]: JSON.stringify({}) });
             });
 
             test('omits location from result', () => {

package/src/utils/__tests__/get-folders.test.ts

@@ -1,14 +1,16 @@
-import mock from 'mock-fs';
+import { fs, vol } from 'memfs';
 
 import { getFolders } from '..';
 
+jest.mock('fs', () => fs);
+
 describe('[Startup] utils:get-folders', () => {
     afterAll(() => {
-        mock.restore();
+        vol.reset();
     });
 
     test('getFolders throws an exception if "compilerOptions.rootDir" isn\'t defined', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({ compilerOptions: { ourDir: 'dist' } }),
         });
@@ -25,7 +27,7 @@ describe('[Startup] utils:get-folders', () => {
     });
 
     test('getFolders throws an exception if "compilerOptions.outDir" isn\'t defined', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({ compilerOptions: { rootDir: 'src' } }),
         });
@@ -42,7 +44,7 @@ describe('[Startup] utils:get-folders', () => {
     });
 
     test('"compilerOptions.outDir" used as the destination', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({
                 compilerOptions: { rootDir: 'src', outDir: 'path' },
@@ -53,7 +55,7 @@ describe('[Startup] utils:get-folders', () => {
     });
 
     test('"compilerOptions.rootDir" used as the source', () => {
-        mock({
+        vol.fromJSON({
             'package.json': JSON.stringify({}),
             'tsconfig.json': JSON.stringify({
                 compilerOptions: { rootDir: 'path', outDir: 'dist' },

package/src/utils/__tests__/get-jest-config.test.ts

@@ -33,7 +33,7 @@ describe('[startup] Utils', () => {
         testPathIgnorePatterns: ['\\.yalc', ...destinationFolders],
         setupFiles: [expect.stringContaining(path.join('jest', 'setup.js'))],
         coveragePathIgnorePatterns: ['^.+\\.d\\.ts$'],
-        coverageReporters: ['html-spa', 'text', 'json', 'cobertura'],
+        coverageReporters: ['html-spa', 'text', 'json', 'cobertura', 'lcov'],
         collectCoverageFrom: ['**/*.{ts,tsx}'],
     };
 

package/src/utils/__tests__/get-tsconfig.test.ts

@@ -1,8 +1,10 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import path from 'path';
 
 import { getTsConfig } from '../get-tsconfig';
 
+jest.mock('fs', () => fs);
+
 describe(`[startup] Utils`, () => {
     describe(`${getTsConfig.name}`, () => {
         const defaultConfig = 'tsconfig.json';
@@ -13,14 +15,14 @@ describe(`[startup] Utils`, () => {
 
         beforeEach(() => (location = undefined));
 
-        afterEach(() => mockFS.restore());
+        afterEach(() => vol.reset());
 
         test(`returns ${defaultConfig}`, () => {
             expect(subject()).toBe(defaultConfig);
         });
 
         describe(`when ${buildConfig} is present`, () => {
-            beforeEach(() => mockFS({ [buildConfig]: JSON.stringify({}) }));
+            beforeEach(() => vol.fromJSON({ [buildConfig]: JSON.stringify({}) }));
 
             test(`returns ${buildConfig}`, () => {
                 expect(subject()).toBe(buildConfig);
@@ -36,7 +38,7 @@ describe(`[startup] Utils`, () => {
 
             describe(`when ${buildConfig} is present`, () => {
                 beforeEach(() => {
-                    mockFS({ packages: { foo: { [buildConfig]: JSON.stringify({}) } } });
+                    vol.fromJSON({ [`packages/foo/${buildConfig}`]: JSON.stringify({}) });
                 });
 
                 test(`returns {location}/${buildConfig}`, () => {

package/src/utils/__tests__/read-json.test.ts

@@ -1,14 +1,16 @@
-import mock from 'mock-fs';
+import { fs, vol } from 'memfs';
 
 import { readJson } from '..';
 
+jest.mock('fs', () => fs);
+
 describe('[Startup] utils:read-json', () => {
     afterAll(() => {
-        mock.restore();
+        vol.reset();
     });
 
     test('readJson works with the current directory', () => {
-        mock({
+        vol.fromJSON({
             'file.json': JSON.stringify({
                 a: true,
                 b: 'string',
@@ -28,20 +30,14 @@ describe('[Startup] utils:read-json', () => {
     });
 
     test('readJson works with the nested directory', () => {
-        mock({
-            path: {
-                to: {
-                    folder: {
-                        'file.json': JSON.stringify({
-                            a: true,
-                            b: 'string',
-                            c: {
-                                d: 7,
-                            },
-                        }),
-                    },
+        vol.fromJSON({
+            'path/to/folder/file.json': JSON.stringify({
+                a: true,
+                b: 'string',
+                c: {
+                    d: 7,
                 },
-            },
+            }),
         });
 
         expect(readJson('./path/to/folder/file.json')).toEqual({

package/src/utils/get-jest-config.ts

@@ -44,7 +44,7 @@ const getJestConfigBase = (
         ],
         setupFiles: [path.join(__dirname, '../../jest/setup.js'), ...toArray(setupFiles)],
         coveragePathIgnorePatterns: ['^.+\\.d\\.ts$', ...coveragePathIgnorePatterns],
-        coverageReporters: ['html-spa', 'text', 'json', 'cobertura'],
+        coverageReporters: ['html-spa', 'text', 'json', 'cobertura', 'lcov'],
         collectCoverageFrom: ['**/*.{ts,tsx}'],
     };
 };

package/src/webpack/__tests__/create-webpack-config-web-component.test.ts

@@ -1,6 +1,6 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import path from 'path';
 import { DefinePlugin } from 'webpack';
 import WebpackAssetsManifest from 'webpack-assets-manifest';
@@ -14,6 +14,7 @@ import { featureCohort, getCallerFile, splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
+jest.mock('fs', () => fs);
 jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
 jest.mock('html-webpack-plugin', () => jest.fn());
 jest.mock('mini-css-extract-plugin', () =>
@@ -86,10 +87,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(getPackages).mockReturnValue([]);
         jest.mocked(getTsConfig).mockReturnValue(tsConfig);
 
-        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
+        vol.fromJSON({ [packageJson]: JSON.stringify({ name: packageName }) });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     const subject = () => createWebpackConfig(overrides, options);
 
@@ -222,9 +223,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         describe('when design-system.css exists', () => {
             beforeEach(() => {
-                mockFS({
+                vol.fromJSON({
                     [packageJson]: JSON.stringify({ name: packageName }),
-                    [source]: { 'design-system.css': '' },
+                    [`${source}/design-system.css`]: '',
                 });
             });
 

package/src/webpack/__tests__/create-webpack-config.test.ts

@@ -1,7 +1,7 @@
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
 import os from 'os';
 import path from 'path';
@@ -28,6 +28,7 @@ import { featureCohort, splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
+jest.mock('fs', () => fs);
 jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
 jest.mock('html-webpack-plugin', () => jest.fn());
 jest.mock('mini-css-extract-plugin', () =>
@@ -124,10 +125,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         Object.keys(argv).forEach(key => delete (argv as any)[key]);
 
-        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
+        vol.fromJSON({ [packageJson]: JSON.stringify({ name: packageName }) });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     const subject = () => createWebpackConfig(overrides, options);
 
@@ -173,6 +174,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         });
     });
 
+    test('configures "amd"', () => {
+        expect(subject().amd).toEqual(false);
+    });
+
     test('configures "devServer"', () => {
         expect(subject().devServer).toEqual({
             port: 8080,
@@ -205,7 +210,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         test('configures "devServer.watchOptions" to ignore TSC packages', () => {
             const ignored = packages
                 .filter(({ type }) => type === PackageType.TSC)
-                .map(({ location }) => path.join(location, getFolders(location).source));
+                .map(({ location }) => location);
             expect(subject().devServer?.watchOptions).toEqual({ ignored });
         });
     });
@@ -226,25 +231,63 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         });
     });
 
-    describe('with --esbuild command line argument', () => {
-        beforeEach(() => Object.assign(argv, { esbuild: true }));
-
+    function itConfiguresTsLoader() {
         test('configures ".tsx" rules to use esbuild-loader', () => {
+            expect(subject().module?.rules).toContainEqual({
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [{ loader: 'esbuild-loader', options: { loader: 'tsx', target: 'es2018' } }],
+            });
+        });
+    }
+    function itConfiguresSwcLoader() {
+        test('configures ".tsx" rules to use swc-loader', () => {
             expect(subject().module?.rules).toContainEqual({
                 test: /\.tsx?$/,
                 exclude: /node_modules/,
                 use: [
                     {
-                        loader: 'esbuild-loader',
-                        options: { loader: 'tsx', target: 'es2018' },
+                        loader: 'swc-loader',
+                        options: {
+                            jsc: {
+                                parser: { syntax: 'typescript', tsx: true, decorators: true },
+                                target: 'es2018',
+                                transform: { legacyDecorator: true, decoratorMetadata: true },
+                            },
+                        },
                     },
                 ],
             });
         });
-
+    }
+    function itConfiguresReactToLoadAutomatically() {
         test('configures React to load automatically', () => {
             expect(subject().plugins).toContainEqual(new ProvidePlugin({ React: 'react' }));
         });
+    }
+    describe('with --esbuild command line argument', () => {
+        beforeEach(() => Object.assign(argv, { esbuild: true }));
+        itConfiguresTsLoader();
+        itConfiguresReactToLoadAutomatically();
+    });
+    describe('with esbuild option', () => {
+        beforeEach(() => {
+            options = { esbuild: true };
+        });
+        itConfiguresTsLoader();
+        itConfiguresReactToLoadAutomatically();
+    });
+    describe('with experimental-bundlers option', () => {
+        beforeEach(() => {
+            options = { experimentalBundlers: true };
+        });
+        itConfiguresSwcLoader();
+        itConfiguresReactToLoadAutomatically();
+    });
+    describe('with --experimental-bundlers command line argument', () => {
+        beforeEach(() => Object.assign(argv, { 'experimental-bundlers': true }));
+        itConfiguresSwcLoader();
+        itConfiguresReactToLoadAutomatically();
     });
 
     test('configures ".css" rule to exclude .module.css files', () => {