@servicetitan/startup 22.19.0 → 22.20.0

package/src/cli/commands/__tests__/start.test.ts

@@ -89,6 +89,20 @@ describe(`[startup] ${Start.name}`, () => {
             });
         });
 
+        describe('with "experimental-bundlers"', () => {
+            beforeEach(() => (args['experimental-bundlers'] = true));
+
+            test('enables swc-loader', async () => {
+                await subject();
+
+                expect(exec).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        '--': ['--watch', '--experimental-bundlers'],
+                    })
+                );
+            });
+        });
+
         describe('with "config"', () => {
             beforeEach(() => (args.config = 'foo.config.js'));
 

package/src/cli/commands/__tests__/styles-check.test.ts

@@ -1,4 +1,4 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import path from 'path';
 import {
     getFolders,
@@ -11,6 +11,7 @@ import {
 
 import { StylesCheck } from '../styles-check';
 
+jest.mock('fs', () => fs);
 jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     getFolders: jest.fn(),
@@ -30,7 +31,7 @@ describe(`[startup] ${StylesCheck.name}`, () => {
         jest.mocked(getFolders).mockReturnValue({ source: 'src', destination: 'dist' });
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     test("warns that application doesn't have design-system.css", async () => {
         await subject();
@@ -70,13 +71,11 @@ describe(`[startup] ${StylesCheck.name}`, () => {
         const systemMinCss = "@import '~@servicetitan/design-system/dist/system.min.css';";
 
         beforeEach(() => {
-            mockFS({
-                src: {
-                    'design-system.css': [tokenCss, anvilFontsCss, systemMinCss].join('\r\n'),
-                    'foo.css': `${tokenCss}\r\n`,
-                    'bar.less': `${anvilFontsCss}\r\n`,
-                    'styles': { 'baz.css': `${systemMinCss}\r\n` },
-                },
+            vol.fromJSON({
+                'src/design-system.css': [tokenCss, anvilFontsCss, systemMinCss].join('\r\n'),
+                'src/foo.css': `${tokenCss}\r\n`,
+                'src/bar.less': `${anvilFontsCss}\r\n`,
+                'src/styles/baz.css': `${systemMinCss}\r\n`,
             });
         });
 
@@ -89,13 +88,15 @@ describe(`[startup] ${StylesCheck.name}`, () => {
                 }
 
                 const errors = jest.mocked(log.error).mock.calls[0][0].split('\n');
-                expect(errors).toEqual([
+                const expectedErrors = [
                     expect.stringMatching(/style check error/i),
                     expect.stringMatching(/style check failed/i),
                     `file bar.less contains link to "${anvilFontsCss}"`,
                     `file foo.css contains link to "${tokenCss}"`,
                     `file ${path.join('styles', 'baz.css')} contains link to "${systemMinCss}"`,
-                ]);
+                ];
+                expect(errors).toEqual(expect.arrayContaining(expectedErrors));
+                expect(errors.length).toEqual(expectedErrors.length);
             });
         }
 

package/src/cli/commands/build.ts

@@ -8,6 +8,7 @@ interface Args {
     'cdn-path'?: string;
     'config'?: string;
     'esbuild'?: boolean;
+    'experimental-bundlers'?: boolean;
     'ignore'?: string | string[];
     'scope'?: string | string[];
     'stat'?: boolean;
@@ -51,6 +52,7 @@ export class Build implements Command {
                 '--': [
                     ...[this.args.config ? `--config "${this.args.config}"` : undefined],
                     ...[this.args.esbuild ? '--esbuild' : undefined],
+                    ...[this.args['experimental-bundlers'] ? '--experimental-bundlers' : undefined],
                     ...[this.args.stat ? '--stat' : undefined],
                 ].filter(item => item),
             });

package/src/cli/commands/bundle-package.ts

@@ -5,9 +5,11 @@ import { bundle, bundleWatch, getModuleType } from '../utils';
 import { Command } from '.';
 
 interface Args {
-    config?: string;
-    stat?: boolean;
-    watch?: boolean;
+    'config'?: string;
+    'stat'?: boolean;
+    'watch'?: boolean;
+    'esbuild'?: boolean;
+    'experimental-bundlers'?: boolean;
 }
 
 export class BundlePackage implements Command {
@@ -25,10 +27,16 @@ export class BundlePackage implements Command {
             );
         }
 
+        const options = {
+            config,
+            esbuild: this.args.esbuild,
+            experimentalBundlers: this.args['experimental-bundlers'],
+        };
+
         if (!watch) {
-            await bundle({ buildStat: stat, config });
+            await bundle({ buildStat: stat, ...options });
         } else {
-            await bundleWatch({ config });
+            await bundleWatch(options);
         }
     }
 }

package/src/cli/commands/start.ts

@@ -5,10 +5,11 @@ import { tsc, tscWatch } from '../utils';
 import { Command } from '.';
 
 interface Args {
-    config?: string;
-    esbuild?: boolean;
-    ignore?: string | string[];
-    scope?: string | string[];
+    'config'?: string;
+    'esbuild'?: boolean;
+    'experimental-bundlers'?: boolean;
+    'ignore'?: string | string[];
+    'scope'?: string | string[];
 }
 
 export class Start implements Command {
@@ -60,6 +61,9 @@ export class Start implements Command {
                               '--watch',
                               this.args.config ? `--config "${this.args.config}"` : undefined,
                               this.args.esbuild ? '--esbuild' : undefined,
+                              this.args['experimental-bundlers']
+                                  ? '--experimental-bundlers'
+                                  : undefined,
                           ].filter(item => item),
                       }),
                   ]

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

@@ -1,4 +1,4 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import path from 'path';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
@@ -13,6 +13,7 @@ import {
     webpackProdConfigFileName,
 } from '../bundle';
 
+jest.mock('fs', () => fs);
 jest.mock('webpack', () => jest.fn());
 jest.mock('webpack-dev-server');
 jest.mock('../../../utils', () => ({
@@ -36,7 +37,7 @@ describe('[startup] Cli Utils', () => {
         compiler = { close: jest.fn(callback => callback()) };
     });
 
-    afterEach(() => mockFS.restore());
+    afterEach(() => vol.reset());
 
     function expectPackageName() {
         const name = pkg.name.replace(/\//g, '-').replace(/[^\w-]/g, '');
@@ -61,7 +62,7 @@ describe('[startup] Cli Utils', () => {
         let stdoutSpy: jest.SpyInstance;
 
         beforeEach(() => {
-            mockFS(packageFS());
+            vol.fromJSON(packageFS());
             options = { buildStat: false };
             stdoutSpy = jest.spyOn(process.stdout, 'write').mockImplementation(jest.fn());
             compiler.run = jest.fn(callback => callback(null, stats as any));
@@ -138,14 +139,14 @@ describe('[startup] Cli Utils', () => {
         describe(`with ${webpackProdConfigFileName} config`, () => {
             const FS = { ...packageFS(), [webpackProdConfigFileName]: '' };
 
-            beforeEach(() => mockFS(FS));
+            beforeEach(() => vol.fromJSON(FS));
 
             itUsesConfig({ name: webpackProdConfigFileName, config: () => prodConfig });
 
             describe('with custom config', () => {
                 beforeEach(() => {
                     options = { config: customConfigFileName };
-                    mockFS({ ...FS, [customConfigFileName]: '' });
+                    vol.fromJSON({ ...FS, [customConfigFileName]: '' });
                 });
 
                 itUsesConfig({ name: 'custom config', config: () => customConfig });
@@ -165,7 +166,7 @@ describe('[startup] Cli Utils', () => {
             const sharedDependencies = { react: 'SharedDependencies.React' };
 
             beforeEach(() => {
-                mockFS(webComponentFS());
+                vol.fromJSON(webComponentFS());
                 jest.mocked(getFolders).mockReturnValue({ source, destination });
                 jest.mocked(getPackageData).mockReturnValue({ dependencies });
                 jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
@@ -210,14 +211,14 @@ describe('[startup] Cli Utils', () => {
             describe(`with ${webpackProdConfigFileName} config`, () => {
                 const FS = { ...webComponentFS(), [webpackProdConfigFileName]: '' };
 
-                beforeEach(() => mockFS(FS));
+                beforeEach(() => vol.fromJSON(FS));
 
                 itUsesConfig({ name: webpackProdConfigFileName, config: () => prodConfig });
 
                 describe('with custom config', () => {
                     beforeEach(() => {
                         options = { config: customConfigFileName };
-                        mockFS({ ...FS, [customConfigFileName]: '' });
+                        vol.fromJSON({ ...FS, [customConfigFileName]: '' });
                     });
 
                     itUsesConfig({ name: 'custom config', config: () => customConfig });
@@ -252,7 +253,7 @@ describe('[startup] Cli Utils', () => {
 
         beforeEach(() => {
             options = undefined;
-            mockFS(packageFS());
+            vol.fromJSON(packageFS());
             jest.mocked(WebpackDevServer).mockImplementation((): any => ({
                 listen: jest.fn((_0: number, _1: string, callback?: (error?: Error) => void) =>
                     stopWatching(callback)
@@ -297,14 +298,14 @@ describe('[startup] Cli Utils', () => {
         describe(`with ${webpackDevConfigFileName} config`, () => {
             const FS = { ...packageFS(), [webpackDevConfigFileName]: '' };
 
-            beforeEach(() => mockFS(FS));
+            beforeEach(() => vol.fromJSON(FS));
 
             itUsesConfig({ name: webpackDevConfigFileName, config: () => devConfig });
 
             describe('with custom config', () => {
                 beforeEach(() => {
                     options = { config: customConfigFileName };
-                    mockFS({ ...FS, [customConfigFileName]: '' });
+                    vol.fromJSON({ ...FS, [customConfigFileName]: '' });
                 });
 
                 itUsesConfig({ name: 'custom config', config: () => customConfig });
@@ -324,7 +325,7 @@ describe('[startup] Cli Utils', () => {
             const sharedDependencies = { react: 'SharedDependencies.React' };
 
             beforeEach(() => {
-                mockFS(webComponentFS());
+                vol.fromJSON(webComponentFS());
                 jest.mocked(getFolders).mockReturnValue({ source, destination });
                 jest.mocked(getPackageData).mockReturnValue({ dependencies });
                 jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
@@ -368,14 +369,14 @@ describe('[startup] Cli Utils', () => {
             describe(`with ${webpackDevConfigFileName} config`, () => {
                 const FS = { ...webComponentFS(), [webpackDevConfigFileName]: '' };
 
-                beforeEach(() => mockFS(FS));
+                beforeEach(() => vol.fromJSON(FS));
 
                 itUsesConfig({ name: webpackDevConfigFileName, config: () => devConfig });
 
                 describe('with custom config', () => {
                     beforeEach(() => {
                         options = { config: customConfigFileName };
-                        mockFS({ ...FS, [customConfigFileName]: '' });
+                        vol.fromJSON({ ...FS, [customConfigFileName]: '' });
                     });
 
                     itUsesConfig({ name: 'custom config', config: () => customConfig });

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

@@ -1,9 +1,13 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import { ESLint } from 'eslint';
 
 import { eslint } from '../eslint';
 
+jest.mock('fs', () => fs);
 jest.mock('eslint');
+jest.mock('../../../utils/get-destination-folders', () => ({
+    getDestinationFolders: () => [],
+}));
 
 describe(`[startup] utils:${eslint.name}`, () => {
     const mockResult = { filePath: 'foo' } as ESLint.LintResult;
@@ -13,7 +17,11 @@ describe(`[startup] utils:${eslint.name}`, () => {
     let eslintResults: ESLint.LintResult[];
     let eslintErrors: ESLint.LintResult[];
 
-    beforeEach(() => jest.resetAllMocks());
+    beforeEach(() => {
+        jest.resetAllMocks();
+        vol.fromJSON({ 'package.json': JSON.stringify({}) });
+    });
+    afterEach(() => vol.reset());
 
     beforeEach(() => {
         mockESLint = {
@@ -79,8 +87,7 @@ describe(`[startup] utils:${eslint.name}`, () => {
             cli: { lint: { eslint: { disabled: true } } },
         });
 
-        beforeEach(() => mockFS({ 'package.json': config }));
-        afterEach(() => mockFS.restore());
+        beforeEach(() => vol.fromJSON({ 'package.json': config }));
 
         test('does nothing', async () => {
             await subject();

package/src/cli/utils/__tests__/get-module-type.test.ts

@@ -1,13 +1,15 @@
-import mockFS from 'mock-fs';
+import { fs, vol } from 'memfs';
 import { getModuleType } from '../get-module-type';
 
+jest.mock('fs', () => fs);
+
 describe('[startup] Cli Utils', () => {
     describe(`${getModuleType.name}`, () => {
         const tsconfig = 'tsconfig.json';
 
-        beforeEach(() => mockFS({ [tsconfig]: JSON.stringify({}) }));
+        beforeEach(() => vol.fromJSON({ [tsconfig]: JSON.stringify({}) }));
 
-        afterEach(() => mockFS.restore());
+        afterEach(() => vol.reset());
 
         const subject = (configPath?: string) => getModuleType(configPath ?? `./${tsconfig}`);
 
@@ -19,7 +21,7 @@ describe('[startup] Cli Utils', () => {
             const module = 'foo';
 
             beforeEach(() => {
-                mockFS({ [tsconfig]: JSON.stringify({ compilerOptions: { module } }) });
+                vol.fromJSON({ [tsconfig]: JSON.stringify({ compilerOptions: { module } }) });
             });
 
             test('returns configured module', () => {
@@ -31,20 +33,13 @@ describe('[startup] Cli Utils', () => {
             const module = 'bar';
 
             beforeEach(() => {
-                mockFS({
+                vol.fromJSON({
                     'tsconfig.json': JSON.stringify({
                         extends: '@servicetitan/startup/tsconfig/base',
                     }),
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    'node_modules': {
-                        '@servicetitan': {
-                            startup: {
-                                tsconfig: {
-                                    'base.json': JSON.stringify({ compilerOptions: { module } }),
-                                },
-                            },
-                        },
-                    },
+                    'packages/startup/tsconfig/base.json': JSON.stringify({
+                        compilerOptions: { module },
+                    }),
                 });
             });
 

package/src/cli/utils/__tests__/is-module-installed.test.ts

@@ -1,11 +1,7 @@
-import mockFS from 'mock-fs';
-
 import { isModuleInstalled } from '../is-module-installed';
 
 describe(`[startup] Cli Utils`, () => {
     describe(`${isModuleInstalled.name}`, () => {
-        afterEach(() => mockFS.restore());
-
         const subject = (name: string) => isModuleInstalled(name);
 
         test('returns false', () => {
@@ -13,11 +9,14 @@ describe(`[startup] Cli Utils`, () => {
         });
 
         describe('when module exists', () => {
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            beforeEach(() => mockFS({ node_modules: { bar: { 'index.js': '' } } }));
+            /*
+             * Have to choose a module that really exists, because we are unable
+             * to mock require.resolve()
+             */
+            const moduleName = 'fs';
 
             test('returns true', () => {
-                expect(subject('bar')).toBe(true);
+                expect(subject(moduleName)).toBe(true);
             });
         });
     });

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,10 +1,11 @@
 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'),
@@ -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/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", () => {