Added console-error-checking

storybookjs · Jun 21, 2023 · d2b4090 · d2b4090
1 parent 2aa338d
commit d2b4090
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -150,6 +150,7 @@ Usage: test-storybook [options]
 | `--junit`                         | Indicates that test information should be reported in a junit file. <br/>`test-storybook --**junit**`                                                                         |
 | `--ci`                            | Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`. <br/>`test-storybook --ci` |
 | `--shard [shardIndex/shardCount]` | Splits your test suite across different machines to run in CI. <br/>`test-storybook --shard=1/3`                                                                              |
+| `--checkConsole`                  | Checks the browser console output for errors<br/>`test-storybook --checkConsole`                                                                                              |
 
 ## Ejecting configuration
 

diff --git a/src/setup-page.ts b/src/setup-page.ts
@@ -51,6 +51,7 @@ const sanitizeURL = (url: string) => {
 
 export const setupPage = async (page: Page, browserContext: BrowserContext) => {
   const targetURL = process.env.TARGET_URL;
+  const checkConsole = process.env.TEST_CHECK_CONSOLE;
 
   const viewMode = process.env.VIEW_MODE || 'story';
   const renderedEvent = viewMode === 'docs' ? 'docsRendered' : 'storyRendered';
@@ -306,10 +307,14 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
 
         // collect logs to show upon test error
         let logs = [];
+        let hasErrors = false;
 
         const spyOnConsole = (method, name) => {
           const originalFn = console[method];
           return function () {
+            if (\`${checkConsole}\`==='true' && method==='error') {
+              hasErrors = true;
+            }
             const message = [...arguments].map(composeMessage).join(', ');
             const prefix = \`\${bold(name)}: \`;
             logs.push(prefix + message);
@@ -332,7 +337,12 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
         })
 
         return new Promise((resolve, reject) => {
-          channel.on('${renderedEvent}', () => resolve(document.getElementById('root')));
+          channel.on('${renderedEvent}', () => { 
+            if (hasErrors) {
+              return reject(new StorybookTestRunnerError(storyId, 'Browser console errors', logs));
+            }
+            return resolve(document.getElementById('root'));             
+          });
           channel.on('storyUnchanged', () => resolve(document.getElementById('root')));
           channel.on('storyErrored', ({ description }) => reject(
             new StorybookTestRunnerError(storyId, description, logs))

diff --git a/src/test-storybook.ts b/src/test-storybook.ts
@@ -297,6 +297,10 @@ const main = async () => {
   const { storiesPaths, lazyCompilation } = getStorybookMetadata();
   process.env.STORYBOOK_STORIES_PATTERN = storiesPaths;
 
+  if (runnerOptions.checkConsole) {
+    process.env.TEST_CHECK_CONSOLE = 'true';
+  }
+
   if (lazyCompilation && isLocalStorybookIp) {
     log(
       `You're running Storybook with lazy compilation enabled, and will likely cause issues with the test runner locally. Consider disabling 'lazyCompilation' in ${runnerOptions.configDir}/main.js when running 'test-storybook' locally.`

diff --git a/src/util/getCliOptions.test.ts b/src/util/getCliOptions.test.ts
@@ -10,4 +10,13 @@ describe('getCliOptions', () => {
     const opts = getCliOptions();
     expect(opts.runnerOptions).toMatchObject(customConfig);
   });
+
+  it('returns checkConsole option if passed', () => {
+    const customConfig = { checkConsole: true };
+    jest
+      .spyOn(cliHelper, 'getParsedCliOptions')
+      .mockReturnValue({ options: customConfig, extraArgs: [] });
+    const opts = getCliOptions();
+    expect(opts.runnerOptions).toMatchObject(customConfig);
+  });
 });
diff --git a/src/util/getCliOptions.ts b/src/util/getCliOptions.ts
@@ -14,6 +14,7 @@ export type CliOptions = {
     coverage?: boolean;
     junit?: boolean;
     browsers?: BrowserType | BrowserType[];
+    checkConsole?: boolean;
   };
   jestOptions: JestOptions;
 };
@@ -28,6 +29,7 @@ const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = [
   'url',
   'coverage',
   'junit',
+  'checkConsole',
 ];
 
 function copyOption<ObjType extends object, KeyType extends keyof ObjType>(

diff --git a/src/util/getParsedCliOptions.ts b/src/util/getParsedCliOptions.ts
@@ -70,7 +70,8 @@ export const getParsedCliOptions = (): ParsedCliOptions => {
     .option(
       '--shard <shardIndex/shardCount>',
       'Splits your test suite across different machines to run in CI.'
-    );
+    )
+    .option('--checkConsole', 'Checks the browser console output for errors');
 
   program.exitOverride();