Merge pull request #54 from storybookjs/feat/add-eject-command

feat: add eject command

README.md

@@ -111,33 +111,15 @@ Usage: test-storybook [options]
 | `--clearCache`                  | Deletes the Jest cache directory and then exits without running tests <br/>`test-storybook --clearCache`                  |
 | `--verbose`                     | Display individual test results with the test suite hierarchy <br/>`test-storybook --verbose`                             |
 | `-u`, `--updateSnapshot`        | Use this flag to re-record every snapshot that fails during this test run <br/>`test-storybook -u`                        |
+| `--eject`                       | Creates a local configuration file to override defaults of the test-runner <br/>`test-storybook --eject`                  |
 
 ## Configuration
 
 The test runner is based on [Jest](https://jestjs.io/) and will accept the [CLI options](https://jestjs.io/docs/cli) that Jest does, like `--watch`, `--maxWorkers`, etc.
 
-The test runner works out of the box, but you can override its Jest configuration by adding a `test-runner-jest.config.js` that sets up your environment in the root folder of your project.
+The test runner works out of the box, but if you want better control over its configuration, you can run `test-storybook --eject` to create a local `test-runner-jest.config.js` file in the root folder of your project, which will be used by the test runner.
 
-```js
-// test-runner-jest.config.js
-module.exports = {
-  cacheDirectory: 'node_modules/.cache/storybook/test-runner',
-  testMatch: ['**/*.stories.[jt]s(x)?'],
-  transform: {
-    '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
-    '^.+\\.[jt]sx?$': 'babel-jest',
-  },
-  preset: 'jest-playwright-preset',
-  testEnvironment: '@storybook/test-runner/playwright/custom-environment.js',
-  testEnvironmentOptions: {
-    'jest-playwright': {
-      browsers: ['chromium', 'firefox', 'webkit'], // run tests against all browsers
-    },
-  },
-};
-```
-
-The runner uses [jest-playwright](https://github.com/playwright-community/jest-playwright) and you can pass [testEnvironmentOptions](https://github.com/playwright-community/jest-playwright#configuration) to further configure it, such as how it's done above to run tests against all browsers instead of just chromium.
+The test runner uses [jest-playwright](https://github.com/playwright-community/jest-playwright) and you can pass [testEnvironmentOptions](https://github.com/playwright-community/jest-playwright#configuration) to further configure it, such as how it's done above to run tests against all browsers instead of just chromium. For this you must eject the test runner configuration.
 
 ## Running against a deployed Storybook
 

bin/test-storybook.js

@@ -108,12 +108,30 @@ async function fetchStoriesJson(url) {
   return tmpDir;
 }
 
+function ejectConfiguration () {
+  const origin = path.resolve(__dirname, '../playwright/test-runner-jest.config.js')
+  const destination = path.resolve('test-runner-jest.config.js')
+  const fileAlreadyExists = fs.existsSync(destination)
+
+  if(fileAlreadyExists) {
+    throw new Error('Found existing file. Please delete it and rerun this command')
+  }
+
+  fs.copyFileSync(origin, destination)
+  console.log('[test-runner] Configuration file successfully copied as test-runner-jest.config.js')
+}
+
 const main = async () => {
+  const { jestOptions, runnerOptions } = getCliOptions();
+
+  if(runnerOptions.eject) {
+    ejectConfiguration();
+    process.exit(0);
+  }
+
   const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);
   await checkStorybook(targetURL);
 
-  const { jestOptions, runnerOptions } = getCliOptions()
-
   if (runnerOptions.storiesJson) {
     storiesJsonTmpDir = await fetchStoriesJson(targetURL);
     process.env.TEST_ROOT = storiesJsonTmpDir;

src/util/getCliOptions.ts

@@ -4,13 +4,14 @@ type CliOptions = {
   runnerOptions: {
     storiesJson: boolean;
     configDir: string;
+    eject?: boolean;
   };
   jestOptions: string[];
 };
 
 type StorybookRunnerCommand = keyof CliOptions['runnerOptions'];
 
-const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = ['storiesJson', 'configDir'];
+const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = ['storiesJson', 'configDir', 'eject'];
 
 export const defaultRunnerOptions: CliOptions['runnerOptions'] = {
   configDir: '.storybook',

src/util/getParsedCliOptions.ts

@@ -15,6 +15,10 @@ export const getParsedCliOptions = () => {
     .option(
       '-u, --updateSnapshot',
       'Use this flag to re-record every snapshot that fails during this test run'
+    )
+    .option(
+      '--eject',
+      'Creates a local configuration file to override defaults of the test-runner. Use it only if you want to have better control over the runner configurations'
     );
 
   program.exitOverride();

test-runner-jest.config.js

@@ -1,5 +1,5 @@
 // !!! This file is used as an override to the test-runner configuration for this repo only !!!
-// If you want to create your own override for your project, use playwright/test-runner-jest.config.js as base instead
+// If you want to create your own override for your project, run test-storybook eject instead
 
 const { getJestConfig } = require('./dist/cjs');