Merge pull request #13535 from dominictwlee/addon-jest-infer-test-files

Addon-jest: Infer parameter from story filename if not provided

addons/jest/README.md

@@ -128,6 +128,9 @@ defaultView.parameters = {
 };
 ```
 
+The jest parameter will default to inferring from your story file name if not provided. For example, if your story file is `MyComponent.stories.js`,
+then "MyComponent" will be used to find your test file results. This currently doesn't work in production environments.
+
 ### Disabling
 
 You can disable the addon for a single story by setting the `jest` parameter to `{disable: true}`:

addons/jest/src/index.ts

@@ -1,10 +1,6 @@
-import addons, { Parameters } from '@storybook/addons';
+import addons from '@storybook/addons';
 import { normalize, sep } from 'upath';
-import { ADD_TESTS } from './shared';
-
-interface AddonParameters extends Parameters {
-  jest?: string | string[] | { disable: true };
-}
+import { ADD_TESTS, defineJestParameter } from './shared';
 
 const findTestResults = (
   testFiles: string[],
@@ -55,13 +51,9 @@ export const withTests = (userOptions: { results: any; filesExt?: string }) => {
 
   return (...args: any[]) => {
     const [storyFn, { kind, parameters = {} }] = args;
-    let { jest: testFiles } = parameters;
+    const testFiles = defineJestParameter(parameters);
 
-    if (typeof testFiles === 'string') {
-      testFiles = [testFiles];
-    }
-
-    if (testFiles && Array.isArray(testFiles)) {
+    if (testFiles !== null) {
       emitAddTests({ kind, story: storyFn, testFiles, options });
     }
 

addons/jest/src/shared.test.ts

@@ -0,0 +1,33 @@
+import { defineJestParameter } from './shared';
+
+describe('defineJestParameter', () => {
+  test('infers from story file name if jest parameter is not provided', () => {
+    expect(defineJestParameter({ fileName: './stories/addon-jest.stories.js' })).toEqual([
+      'addon-jest',
+    ]);
+  });
+
+  test('wraps string jest parameter with an array', () => {
+    expect(defineJestParameter({ jest: 'addon-jest' })).toEqual(['addon-jest']);
+  });
+
+  test('returns as is if jest parameter is an array', () => {
+    expect(defineJestParameter({ jest: ['addon-jest', 'something-else'] })).toEqual([
+      'addon-jest',
+      'something-else',
+    ]);
+  });
+
+  test('returns null if disabled option is passed to jest parameter', () => {
+    expect(defineJestParameter({ jest: { disabled: true } })).toBeNull();
+  });
+
+  test('returns null if no filename to infer from', () => {
+    expect(defineJestParameter({})).toBeNull();
+  });
+
+  test('returns null if filename is a module ID that cannot be inferred from', () => {
+    // @ts-ignore
+    expect(defineJestParameter({ fileName: 1234 })).toBeNull();
+  });
+});

addons/jest/src/shared.ts

@@ -1,6 +1,31 @@
+import type { Parameters } from '@storybook/addons';
+
 // addons, panels and events get unique names using a prefix
 export const PARAM_KEY = 'test';
 export const ADDON_ID = 'storybookjs/test';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 
 export const ADD_TESTS = `${ADDON_ID}/add_tests`;
+
+interface AddonParameters extends Parameters {
+  jest?: string | string[] | { disabled: true };
+}
+
+export function defineJestParameter(parameters: AddonParameters): string[] | null {
+  const { jest, fileName: filePath } = parameters;
+
+  if (typeof jest === 'string') {
+    return [jest];
+  }
+
+  if (jest && Array.isArray(jest)) {
+    return jest;
+  }
+
+  if (jest === undefined && typeof filePath === 'string') {
+    const fileName = filePath.split('/').pop().split('.')[0];
+    return [fileName];
+  }
+
+  return null;
+}

addons/jest/tsconfig.json

@@ -2,12 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": ["webpack-env", "jest"]
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
 }

examples/official-storybook/stories/addon-jest.stories.js

@@ -10,3 +10,8 @@ export default {
 
 export const WithTests = () => <p>Hello</p>;
 WithTests.parameters = { jest: 'addon-jest' };
+
+export const WithInferredTests = () => <p>Inferred Tests</p>;
+
+export const DisabledTests = () => <p>Disabled Tests</p>;
+DisabledTests.parameters = { jest: { disabled: true } };