storyshots is working

.babelrc

@@ -5,7 +5,7 @@
         "browsers": ["last 2 versions", "ie 11"]
       }
     }],
-    "babel-preset-react"
+    "babel-preset-react",
   ],
   "plugins": ["transform-object-rest-spread"]
 }

.storybook/__storyshots__/SelectInput.shot

+exports[`basic usage`] = `
+<div
+  className="form-group">
+  <label
+    className=""
+    htmlFor="textInput3">
+    Fruits
+  </label>
+  <select
+    aria-describedby={undefined}
+    className="form-control"
+    id="textInput3"
+    name="fruits"
+    onBlur={[Function]}
+    onChange={[Function]}
+    value="strawberry">
+    <option
+      value="apple">
+      apple
+    </option>
+    <option
+      value="orange">
+      orange
+    </option>
+    <option
+      value="strawberry">
+      strawberry
+    </option>
+    <option
+      value="banana">
+      banana
+    </option>
+  </select>
+</div>
+`;
+
+exports[`separate labels and values`] = `
+<div
+  className="form-group">
+  <label
+    className=""
+    htmlFor="textInput4">
+    New England States
+  </label>
+  <select
+    aria-describedby={undefined}
+    className="form-control"
+    id="textInput4"
+    name="new-england-states"
+    onBlur={[Function]}
+    onChange={[Function]}
+    value="RI">
+    <option
+      value="CN">
+      Connecticut
+    </option>
+    <option
+      value="ME">
+      Maine
+    </option>
+    <option
+      value="MA">
+      Massachusetts
+    </option>
+    <option
+      value="NH">
+      New Hampshire
+    </option>
+    <option
+      value="RI">
+      Rhode Island
+    </option>
+    <option
+      value="VT">
+      Vermont
+    </option>
+  </select>
+</div>
+`;
+
+exports[`separate option groups`] = `
+<div
+  className="form-group">
+  <label
+    className=""
+    htmlFor="textInput5">
+    Northeast States
+  </label>
+  <select
+    aria-describedby={undefined}
+    className="form-control"
+    id="textInput5"
+    name="northeast-states"
+    onBlur={[Function]}
+    onChange={[Function]}
+    value="MD">
+    <optgroup
+      label="New England States">
+      <option
+        value="CN">
+        Connecticut
+      </option>
+      <option
+        value="ME">
+        Maine
+      </option>
+      <option
+        value="MA">
+        Massachusetts
+      </option>
+      <option
+        value="NH">
+        New Hampshire
+      </option>
+      <option
+        value="RI">
+        Rhode Island
+      </option>
+      <option
+        value="VT">
+        Vermont
+      </option>
+    </optgroup>
+    <optgroup
+      label="Mid Atlantic States">
+      <option
+        value="DE">
+        Delaware
+      </option>
+      <option
+        value="MD">
+        Maryland
+      </option>
+      <option
+        value="NJ">
+        New Jersey
+      </option>
+      <option
+        value="NY">
+        New York
+      </option>
+      <option
+        value="PA">
+        Pennsylvania
+      </option>
+      <option
+        value="VA">
+        Virginia
+      </option>
+      <option
+        value="DC">
+        Washington, DC
+      </option>
+      <option
+        value="WV">
+        West Virginia
+      </option>
+    </optgroup>
+  </select>
+</div>
+`;
+
+exports[`with validation`] = `
+<div
+  className="form-group">
+  <label
+    className=""
+    htmlFor="textInput6">
+    Favorite Color
+  </label>
+  <select
+    aria-describedby={undefined}
+    className="form-control"
+    id="textInput6"
+    name="color"
+    onBlur={[Function]}
+    onChange={[Function]}
+    value="">
+    <option
+      value="">
+      
+    </option>
+    <option
+      value="red">
+      red
+    </option>
+    <option
+      value="orange">
+      orange
+    </option>
+    <option
+      value="yellow">
+      yellow
+    </option>
+    <option
+      value="green">
+      green
+    </option>
+    <option
+      value="blue">
+      blue
+    </option>
+    <option
+      value="purple">
+      purple
+    </option>
+  </select>
+</div>
+`;

.storybook/__storyshots__/TextInput.shot

+exports[`minimal usage`] = `
+<div
+  className="form-group">
+  <label
+    className=""
+    htmlFor="textInput1">
+    First Name
+  </label>
+  <input
+    aria-describedby={undefined}
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="textInput1"
+    name="name"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    type="text"
+    value="Foo Bar" />
+</div>
+`;
+
+exports[`validation`] = `
+<div
+  className="form-group">
+  <label
+    className=""
+    htmlFor="textInput2">
+    Username
+  </label>
+  <input
+    aria-describedby="undefined description-textInput2"
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="textInput2"
+    name="username"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    type="text"
+    value="" />
+  <small
+    className="form-text"
+    id="description-textInput2">
+    The unique name that identifies you throughout the site.
+  </small>
+</div>
+`;

.storybook/__storyshots__/Welcome.shot

+exports[`to Storybook`] = `
+<div
+  style={
+    Object {
+      "fontFamily": "\"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "margin": 15,
+      "maxWidth": 600,
+    }
+  }>
+  <h1>
+    Paragon
+  </h1>
+  <p>
+    This is a documentation and demo space for the Paragon accessible UI Component library. Better docs coming soon, but for now, check out our existing components via the links to the left-hand side.
+  </p>
+  <p>
+    Documentation generated with 
+    <a
+      href="https://github.com/kadirahq/react-storybook"
+      rel="noopener noreferrer"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank">
+      React Storybook
+    </a>
+    .
+  </p>
+</div>
+`;

package.json

@@ -12,11 +12,13 @@
     "lint": "eslint --ext .js --ext .jsx .",
     "precommit": "yarn run lint",
     "start": "start-storybook -p 6006",
-    "test": "jest"
+    "test": "jest",
+    "test-storybook": "storyshots"
   },
   "dependencies": {
     "@storybook/addons": "^3.0.0",
     "@storybook/channels": "^3.0.0",
+    "@storybook/react": "^3.0.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
@@ -28,6 +30,7 @@
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",
     "@kadira/storybook-deployer": "^1.2.0",
+    "@kadira/storyshots": "^2.1.0",
     "@storybook/addon-storyshots": "^3.0.0",
     "babel-cli": "^6.24.1",
     "babel-loader": "^7.0.0",

stories/Storyshots.test.js

+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots();