fix: convert test mock main configs to valid ESM

The tests package has "type": "module" but mock main.js files used
module.exports (CJS), causing storybook's loadMainConfig to fail on
the first attempt and fall back. Converting to export default fixes
the warning and adds a dedicated CJS test case with main.cjs.

Author: dannyhw

tests/scripts/generate.test.ts

@@ -41,6 +41,20 @@ describe('loader', () => {
       });
     });
 
+    describe('when the main config is a cjs file', () => {
+      it('writes the story imports', async (t) => {
+        mock.method(require('fs'), 'writeFileSync', mockFs.writeFileSync);
+        await generate({ configPath: 'scripts/mocks/cjs-config' });
+        mock.reset();
+
+        assert.strictEqual(
+          pathMock,
+          path.resolve(__dirname, 'mocks/cjs-config/storybook.requires.ts')
+        );
+        t.assert.snapshot(fileContentMock);
+      });
+    });
+
     describe('when using js', () => {
       it('writes the story imports without types', async (t) => {
         mock.method(require('fs'), 'writeFileSync', mockFs.writeFileSync);

tests/scripts/generate.test.ts.snapshot

@@ -26,6 +26,10 @@ exports[`loader > writeRequires > when only port is provided without host > does
 "/* do not change this file, it is auto generated by storybook. */\\n/// <reference types=\\"@storybook/react-native/metro-env\\" />\\nimport { start, updateView, View, type Features } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/all-config-files\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var FEATURES: Features;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;
 
+exports[`loader > writeRequires > when the main config is a cjs file > writes the story imports 1`] = `
+"/* do not change this file, it is auto generated by storybook. */\\n/// <reference types=\\"@storybook/react-native/metro-env\\" />\\nimport { start, updateView, View, type Features } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/cjs-config\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var FEATURES: Features;\\n}\\n\\n\\nconst annotations = [\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
+`;
+
 exports[`loader > writeRequires > when there are different file extensions > writes the story imports 1`] = `
 "/* do not change this file, it is auto generated by storybook. */\\n/// <reference types=\\"@storybook/react-native/metro-env\\" />\\nimport { start, updateView, View, type Features } from '@storybook/react-native';\\n\\nimport \\"@storybook/addon-ondevice-notes/register\\";\\nimport \\"@storybook/addon-ondevice-controls/register\\";\\nimport \\"@storybook/addon-ondevice-backgrounds/register\\";\\nimport \\"@storybook/addon-ondevice-actions/register\\";\\n\\nconst normalizedStories = [\\n  {\\n    titlePrefix: \\"\\",\\n    directory: \\"./scripts/mocks/file-extensions\\",\\n    files: \\"FakeStory.stories.tsx\\",\\n    importPathMatcher: /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/,\\n    req: require.context(\\n      './',\\n      false,\\n      /^\\\\.[\\\\\\\\/](?:FakeStory\\\\.stories\\\\.tsx)$/\\n    ),\\n  }\\n];\\n\\n\\ndeclare global {\\n  var view: View;\\n  var STORIES: typeof normalizedStories;\\n  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;\\n  var FEATURES: Features;\\n}\\n\\n\\nconst annotations = [\\n  require('./preview'),\\n  require(\\"@storybook/react-native/preview\\")\\n];\\n\\nglobalThis.STORIES = normalizedStories;\\n\\n\\nmodule?.hot?.accept?.();\\n\\n\\n\\nif (!globalThis.view) {\\n  globalThis.view = start({\\n    annotations,\\n    storyEntries: normalizedStories,\\n\\n  });\\n} else {\\n  updateView(globalThis.view, annotations, normalizedStories);\\n}\\n\\nexport const view: View = globalThis.view;\\n"
 `;

tests/scripts/mocks/all-config-files/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: ['./FakeStory.stories.tsx'],
   addons: [
     '@storybook/addon-ondevice-notes',

tests/scripts/mocks/blank-config/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: [],
   addons: [],
 };

tests/scripts/mocks/cjs-config/FakeComponent.tsx

@@ -0,0 +1 @@
+export const FakeComponent = () => null;

tests/scripts/mocks/cjs-config/FakeStory.stories.tsx

@@ -0,0 +1,10 @@
+import { FakeComponent } from './FakeComponent';
+
+export default {
+  title: 'components/FakeComponent',
+  component: FakeComponent,
+};
+
+export const Basic = {
+  args: {},
+};

tests/scripts/mocks/cjs-config/main.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['./FakeStory.stories.tsx'],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};

tests/scripts/mocks/configuration-objects/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: [
     {
       files: '**/*.stories.tsx',

tests/scripts/mocks/exclude-config-files/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: ['**/*.stories.tsx'],
   reactNativeOptions: {
     excludePaths: '**/exclude-components/**',

tests/scripts/mocks/no-preview/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: ['./FakeStory.stories.tsx'],
   addons: [
     '@storybook/addon-ondevice-notes',