Add storybook ci option to test that Storybook starts "ok" (#3515)

* add rw storybook --ci option passing --smoke-test

* fix: do not stub `process.env`

see: #3515 (comment)

* chore: enable typechecking

see: #3515 (comment)

* refactor(rename): ci -> smoke-test

* chore: add some logic checks

see: yargs/yargs#189 (comment)

* feat: wire up smoke test

* fix: run checker in synchronously mode

see: #3515 (comment)

* chore: shorten timeout and fail faster

* chore: try and move this into a before

* use sb --smoke-test for E2E; remove Cypress spec

* fix: only set up type checking for typescript projects

#3515 (comment)

* Update tasks/e2e/cypress/integration/03-storybook/storybook.spec.js

Co-authored-by: David Price <thedavid@thedavidprice.com>

.github/workflows/e2e.yaml

@@ -82,14 +82,17 @@ jobs:
           working-directory: ./tasks/e2e
           spec: |
              cypress/integration/01-tutorial/*.spec.js
-             cypress/integration/03-storybook/*.spec.js
              cypress/integration/04-logger/*.spec.js
 
       - name: Prepare for CLI checks by restoring 01-tutorial end state
         run: |
           git restore . && git clean -df
         working-directory: ${{ steps.createpath.outputs.project_path }}
 
+      - name: Run `rw storybook`
+        run: yarn rw storybook --smoke-test
+        working-directory: ${{ steps.createpath.outputs.project_path }}
+
       - name: Run `rw test api`
         run: yarn rw test api --no-watch
         working-directory: ${{ steps.createpath.outputs.project_path }}

packages/cli/src/commands/storybook.js

@@ -37,6 +37,21 @@ export const builder = (yargs) => {
       type: 'boolean',
       default: true,
     })
+    .option('smoke-test', {
+      describe:
+        "CI mode plus Smoke-test (skip prompts, don't open browser, exit after successful start)",
+      type: 'boolean',
+      default: false,
+    })
+    .check((argv) => {
+      if (argv.build && argv.smokeTest) {
+        throw new Error('Can not provide both "--build" and "--smoke-test"')
+      }
+      if (argv.build && argv.open) {
+        throw new Error('Can not provide both "--build" or "--open"')
+      }
+      return true
+    })
 }
 
 export const handler = ({
@@ -45,6 +60,7 @@ export const handler = ({
   build,
   buildDirectory,
   managerCache,
+  smokeTest,
 }) => {
   const cwd = getPaths().web.base
 
@@ -69,7 +85,8 @@ export const handler = ({
       !build && '--no-version-updates',
       !managerCache && '--no-manager-cache',
       build && `--output-dir "${buildDirectory}"`,
-      !open && '--ci',
+      !open && !smokeTest && `--ci`,
+      smokeTest && `--ci --smoke-test`,
     ].filter(Boolean),
     {
       stdio: 'inherit',

packages/core/config/webpack.common.js

@@ -172,6 +172,7 @@ const getSharedPlugins = (isEnvProduction) => {
     new Dotenv({
       path: path.resolve(redwoodPaths.base, '.env'),
       silent: true,
+      ignoreStub: true, // FIXME: this might not be necessary once the storybook webpack 4/5 stuff is ironed out. See also: https://github.com/mrsteele/dotenv-webpack#processenv-stubbing--replacing
     }),
   ].filter(Boolean)
 }

packages/testing/config/storybook/main.js

@@ -9,6 +9,7 @@ const {
   getConfig,
   getPaths,
 } = require('@redwoodjs/internal')
+const { getProject } = require('@redwoodjs/structure')
 
 const config = getConfig()
 
@@ -136,6 +137,15 @@ const baseConfig = {
   ...(process.env.NODE_ENV !== 'production' && {
     staticDirs: [`${staticAssetsFolder}`],
   }),
+  // only set up type checking for typescript projects
+  ...(getProject().isTypeScriptProject && {
+    // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+    typescript: {
+      check: true,
+      // By default, the checker runs asynchronously in dev mode. Force it to run synchronously.
+      checkOptions: { async: false },
+    },
+  }),
 }
 
 const mergeUserStorybookConfig = (baseConfig) => {

tasks/e2e/cypress/integration/03-storybook/storybook.spec.js

@@ -12,7 +12,8 @@ describe(
   'Redwood Storybook Integration',
   { baseUrl: 'http://localhost:8910' },
   () => {
-    it('0. Build Storybook Static Files', () => {
+    // 0. Build Storybook Static Files
+    before(() => {
       cy.writeFile(
         path.join(BASE_DIR, 'web/src/components/BlogPost/BlogPost.stories.js'),
         Step1_1_BlogPostStory
@@ -33,13 +34,11 @@ describe(
       )
 
       // Slow!
-      cy.exec(`cd ${BASE_DIR}; yarn rw storybook --build`, {
+      cy.exec(`cd ${BASE_DIR} || exit; yarn rw storybook --build`, {
         timeout: 300_0000,
-      }).then((result) => {
-        const { code, stderr } = result
-        expect(code).to.eq(0)
-        expect(stderr).to.not.contain('ERR!')
       })
+        .its('stderr')
+        .should('not.contain', 'ERR!')
     })
 
     it('1. Component: BlogPost', () => {