https://github.com/mthuret/storybook-addon-specifications/issues/24

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@kadira/storybook/addons';
+import 'storybook-addon-specifications/register';

.storybook/config.js

@@ -0,0 +1,8 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories/index.js');
+  // You can require as many stories as you need.
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.json$/,
+        loader: 'json',
+      },
+    ]
+  },
+  externals: {
+       'jsdom': 'window',
+       'cheerio': 'window',
+       'react/lib/ExecutionEnvironment': true,
+       'react/lib/ReactContext': 'window',
+       'react/addons': true,
+    }
+}

component/Kronos.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import Kronos from  '../dist/bundle.js'
+import Moment from 'moment'
+
+export default class KronosDateTime extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+          initDateTime: Moment().toISOString(),
+        }
+    }
+
+    onChange(datetime) {
+        this.setState({ initDateTime: datetime,})
+        console.log(datetime)
+    }
+
+    render() {
+        return (
+            <div className='kronos'>
+                <Kronos
+                    date={this.state.initDateTime}
+                    onChangeDateTime={::this.onChange}
+                    placeholder={'Choisir une date'}
+                    format={'DD MMMM YYYY'}
+                    options={
+                        {
+                            moment: { lang: 'fr' },
+                        }
+                    }
+                />
+                <Kronos
+                    time={this.state.initDateTime}
+                    onChangeDateTime={::this.onChange}
+                    placeholder={'Choisir une heure'}
+                    format={'HH:mm'}
+                    options={
+                        {
+                            moment: { lang: 'fr' },
+                            format: { hour: 'HH:mm' },
+                        }
+                    }
+                />
+            </div>
+        )
+    }
+}

package.json

@@ -11,7 +11,8 @@
     "build:examples": "NODE_ENV=production webpack --config examples/webpack.config.examples.js",
     "clean": "rimraf dist && rimraf lib && npm run clean:examples",
     "clean:examples": "rimraf examples/bundle.*",
-    "push_examples": "./scripts/push_ghpages"
+    "push_examples": "./scripts/push_ghpages",
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "repository": {
     "type": "git",
@@ -40,6 +41,7 @@
   },
   "homepage": "http://dubert.github.io/react-kronos",
   "devDependencies": {
+    "@kadira/storybook": "^2.35.2",
     "babel-cli": "^6.10.1",
     "babel-core": "^6.10.4",
     "babel-eslint": "^6.0.4",
@@ -48,15 +50,21 @@
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "^6.18.0",
     "empty-module": "0.0.2",
+    "enzyme": "^2.7.0",
+    "expect": "^1.20.2",
     "express": "^4.13.4",
+    "json": "^9.0.4",
     "json-loader": "^0.5.4",
     "react": "^15.1.0",
+    "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15.1.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
     "redbox-react": "^1.2.6",
     "rimraf": "^2.5.2",
+    "storybook-addon-specifications": "^1.0.15",
     "webpack": "^1.13.1",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.10.0",

stories/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import { specs, describe, it } from 'storybook-addon-specifications'
+
+import {mount} from 'enzyme';
+import expect from 'expect';
+
+import KronosDateTime from '../component/Kronos';
+
+const onButtonPress = action('Button has been pressed!');
+
+storiesOf('Kronos', module)
+  .add('Date and Time', function() {
+    const story =
+        <KronosDateTime
+              initDateTime={ new Date() }
+              onChange={ onButtonPress }
+        />;
+
+    specs(() => describe('Date and Time', function () {
+        it('Should have the current date and time', function () {
+          // Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.
+          let output = mount(story);
+          // works fine without the previous line
+          const foo = 'foo';
+          expect(foo).toEqual('foo');
+        });
+      }));
+
+    return story;
+  });