implement support for jsx/tsx preview files

__mocks__/fs.js

@@ -14,10 +14,14 @@ function __setMockFiles(newMockFiles) {
 // file list set via __setMockFiles
 const readFileSync = (filePath = '') => mockFiles[filePath];
 const existsSync = filePath => !!mockFiles[filePath];
+const lstatSync = filePath => ({
+  isFile: () => !!mockFiles[filePath],
+});
 
 // eslint-disable-next-line no-underscore-dangle
 fs.__setMockFiles = __setMockFiles;
 fs.readFileSync = readFileSync;
 fs.existsSync = existsSync;
+fs.lstatSync = lstatSync;
 
 module.exports = fs;

addons/storyshots/storyshots-core/src/frameworks/configure.test.ts

@@ -0,0 +1,26 @@
+import { getPreviewFile } from './configure';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs', () => require('../../../../../__mocks__/fs'));
+const setupFiles = (files: Record<string, string>) => {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  require('fs').__setMockFiles(files);
+};
+
+it.each`
+  filepath
+  ${'preview.ts'}
+  ${'preview.tsx'}
+  ${'preview.js'}
+  ${'preview.jsx'}
+`('resolves a valid preview file from $filepath', ({ filepath }) => {
+  setupFiles({ [`test/${filepath}`]: 'true' });
+
+  expect(getPreviewFile('test/')).toEqual(`test/${filepath}`);
+});
+
+it('returns false when none of the paths exist', () => {
+  setupFiles(Object.create(null));
+
+  expect(getPreviewFile('test/')).toEqual(false);
+});

addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -21,26 +21,15 @@ interface Output {
   files: string[];
 }
 
-const getPreviewFile = (configDir: string): string | false => {
-  const preview = path.join(configDir, 'preview.js');
-  const previewTS = path.join(configDir, 'preview.ts');
-  const config = path.join(configDir, 'config.js');
-  const configTS = path.join(configDir, 'config.ts');
-
-  if (isFile(previewTS)) {
-    return previewTS;
-  }
-  if (isFile(preview)) {
-    return preview;
-  }
-  if (isFile(configTS)) {
-    return configTS;
-  }
-  if (isFile(config)) {
-    return config;
-  }
+const supportedExtensions = ['ts', 'tsx', 'js', 'jsx'];
+const supportedFilenames = ['preview', 'config'];
 
-  return false;
+export const getPreviewFile = (configDir: string): string | false => {
+  const allFilenames = supportedFilenames
+    .flatMap(filename => supportedExtensions.map(ext => `${filename}.${ext}`))
+    .map(filename => path.join(configDir, filename));
+
+  return allFilenames.find(isFile) || false;
 };
 
 const getMainFile = (configDir: string): string | false => {