diff --git a/README.md b/README.md
index 66980e48..606f9a6e 100644
--- a/README.md
+++ b/README.md
@@ -105,7 +105,8 @@ Usage: test-storybook [options]
| Options | Description |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `--help` | Output usage information
`test-storybook --help` |
-| `-s`, `--stories-json` | Run in stories json mode (requires a compatible Storybook)
`test-storybook --stories-json` |
+| `-s`, `--stories-json` | Run in stories json mode. Automatically detected (requires a compatible Storybook)
`test-storybook --stories-json` |
+| `--no-stories-json` | Disables stories json mode
`test-storybook --no-stories-json` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`test-storybook -c .storybook` |
| `--watch` | Run in watch mode
`test-storybook --watch` |
| `--url` | Define the URL to run tests in. Useful for custom Storybook URLs
`test-storybook --url http://the-storybook-url-here.com` |
@@ -149,7 +150,7 @@ This is particularly useful for running against a deployed storybook because `st
To run in stories.json mode, first make sure your Storybook has a v3 `stories.json` file. You can navigate to:
```
-https://the-storybook-url-here.com/stories.json
+https://your-storybook-url-here.com/stories.json
```
It should be a JSON file and the first key should be `"v": 3` followed by a key called `"stories"` containing a map of story IDs to JSON objects.
@@ -167,10 +168,18 @@ module.exports = {
};
```
-Once you have a valid `stories.json` file, you can run the test runner against it with the `--stories-json` flag:
+Once you have a valid `stories.json` file, your Storybook will be compatible with the "stories.json mode".
+
+By default, the test runner will detect whether your Storybook URL is local or remote, and if it is remote, it will run in "stories.json mode" automatically. To disable it, you can pass the `--no-stories-json` flag:
+
+```bash
+yarn test-storybook --no-stories-json
+```
+
+If you are running tests against a local Storybook but for some reason want to run in "stories.json mode", you can pass the `--stories-json` flag:
```bash
-TARGET_URL=https://the-storybook-url-here.com yarn test-storybook --stories-json
+yarn test-storybook --stories-json
```
> **NOTE:** stories.json mode is not compatible with watch mode.
diff --git a/bin/test-storybook.js b/bin/test-storybook.js
index 6ceebd0c..94f44345 100755
--- a/bin/test-storybook.js
+++ b/bin/test-storybook.js
@@ -3,6 +3,7 @@
'use strict';
const fetch = require('node-fetch');
+const isLocalhostIp = require('is-localhost-ip');
const fs = require('fs');
const dedent = require('ts-dedent').default;
const path = require('path');
@@ -22,11 +23,13 @@ process.on('unhandledRejection', (err) => {
throw err;
});
+const log = (message) => console.log(`[test-storybook] ${message}`)
+
// Clean up tmp files globally in case of control-c
let storiesJsonTmpDir;
const cleanup = () => {
if (storiesJsonTmpDir) {
- console.log(`[test-storybook] Cleaning up ${storiesJsonTmpDir}`);
+ log(`Cleaning up ${storiesJsonTmpDir}`);
fs.rmSync(storiesJsonTmpDir, { recursive: true, force: true });
}
process.exit();
@@ -98,7 +101,7 @@ async function fetchStoriesJson(url) {
fs.writeFileSync(tmpFile, test);
});
} catch (err) {
- console.error(`[test-storybook] Failed to fetch stories.json from ${storiesJsonUrl}`);
+ console.error(`Failed to fetch stories.json from ${storiesJsonUrl}`);
console.error(
'More info: https://github.com/storybookjs/test-runner/blob/main/README.md#storiesjson-mode\n'
);
@@ -108,12 +111,12 @@ async function fetchStoriesJson(url) {
return tmpDir;
}
-function ejectConfiguration () {
+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) {
+
+ if (fileAlreadyExists) {
throw new Error(dedent`Found existing file at:
${destination}
@@ -121,25 +124,25 @@ function ejectConfiguration () {
Please delete it and rerun this command.
\n`)
}
-
+
fs.copyFileSync(origin, destination)
- console.log('[test-runner] Configuration file successfully copied as test-runner-jest.config.js')
+ log('Configuration file successfully copied as test-runner-jest.config.js')
}
const main = async () => {
const { jestOptions, runnerOptions } = getCliOptions();
- if(runnerOptions.eject) {
+ if (runnerOptions.eject) {
ejectConfiguration();
process.exit(0);
}
const targetURL = sanitizeURL(process.env.TARGET_URL || runnerOptions.url);
await checkStorybook(targetURL);
-
+
process.env.TARGET_URL = targetURL;
-
- if(process.env.REFERENCE_URL) {
+
+ if (process.env.REFERENCE_URL) {
process.env.REFERENCE_URL = sanitizeURL(process.env.REFERENCE_URL);
}
@@ -147,8 +150,15 @@ const main = async () => {
if (!process.env.TEST_BROWSERS && runnerOptions.browsers) {
process.env.TEST_BROWSERS = runnerOptions.browsers.join(',');
}
+ const { hostname } = new URL(targetURL)
+
+ const isLocalStorybookIp = await isLocalhostIp(hostname, true)
+ const shouldRunStoriesJson = runnerOptions.storiesJson !== false && !isLocalStorybookIp
+ if (shouldRunStoriesJson) {
+ log('Detected a remote Storybook URL, running in stories json mode. To disable this, run the command again with --no-stories-json')
+ }
- if (runnerOptions.storiesJson) {
+ if (runnerOptions.storiesJson || shouldRunStoriesJson) {
storiesJsonTmpDir = await fetchStoriesJson(targetURL);
process.env.TEST_ROOT = storiesJsonTmpDir;
process.env.TEST_MATCH = '**/*.test.js';
@@ -162,4 +172,4 @@ const main = async () => {
await executeJestPlaywright(jestOptions);
};
-main().catch((e) => console.log(`[test-storybook] ${e}`));
+main().catch((e) => log(e));
diff --git a/package.json b/package.json
index 1fc99d5b..c44b4706 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
"@storybook/csf-tools": "^6.4.14",
"commander": "^9.0.0",
"global": "^4.4.0",
+ "is-localhost-ip": "^1.4.0",
"jest-playwright-preset": "^1.7.0",
"node-fetch": "^2",
"playwright": "^1.14.0",
diff --git a/src/util/getParsedCliOptions.ts b/src/util/getParsedCliOptions.ts
index 6238766d..3bd3549b 100644
--- a/src/util/getParsedCliOptions.ts
+++ b/src/util/getParsedCliOptions.ts
@@ -4,9 +4,9 @@ export const getParsedCliOptions = () => {
program
.option(
'-s, --stories-json',
- 'Run in stories json mode (requires a compatible Storybook)',
- false
+ 'Run in stories json mode. Automatically detected (requires a compatible Storybook)'
)
+ .option('--no-stories-json', 'Disable stories json mode')
.option(
'-c, --config-dir ',
'Directory where to load Storybook configurations from',
diff --git a/yarn.lock b/yarn.lock
index 2a70ffd3..21379ce3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7755,6 +7755,11 @@ is-hexadecimal@^1.0.0:
resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+is-localhost-ip@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/is-localhost-ip/-/is-localhost-ip-1.4.0.tgz#dd66aaabcbb5dbbc943e00adad5f715d2c3b3a1d"
+ integrity sha512-cN7SzlY7BVxSeoJu5equjsZaKSgD4HCfXrTwu0Jgbq5BbT1BU+D7Lyi/l1KO8H0un0JTlxcQaT/GWVapu+DIDg==
+
is-map@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"