Addon-jest support

ADDONS_SUPPORT.md

@@ -9,7 +9,7 @@
 |[events](addons/events)          |+| | | | | |+|
 |[graphql](addons/graphql)        |+| | | | | | |
 |[info](addons/info)              |+| | | | | | |
-|[jest](addons/jest)              |+| | | | | | |
+|[jest](addons/jest)              |+| | | | | |+|
 |[knobs](addons/knobs)            |+|+|+|+|+|+|+|
 |[links](addons/links)            |+|+|+|+|+|+|+|
 |[notes](addons/notes)            |+| |+|+|+|+|+|

examples/html-kitchen-sink/.storybook/addons.js

@@ -2,6 +2,7 @@ import '@storybook/addon-a11y/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-events/register';
+import '@storybook/addon-jest/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-notes/register';

examples/html-kitchen-sink/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
     "storybook": "start-storybook -p 9006",
     "build-storybook": "build-storybook"
   },
@@ -19,6 +19,7 @@
     "@storybook/addon-backgrounds": "^4.0.0-alpha.3",
     "@storybook/addon-centered": "^4.0.0-alpha.3",
     "@storybook/addon-events": "^4.0.0-alpha.3",
+    "@storybook/addon-jest": "^4.0.0-alpha.3",
     "@storybook/addon-knobs": "^4.0.0-alpha.3",
     "@storybook/addon-links": "^4.0.0-alpha.3",
     "@storybook/addon-notes": "^4.0.0-alpha.3",
@@ -33,6 +34,7 @@
     "babel-runtime": "^6.26.0",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "jest": "^22.4.3"
   }
 }

examples/html-kitchen-sink/stories/addon-jest.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/html';
+
+import { withTests } from '@storybook/addon-jest';
+import results from './addon-jest.testresults.json';
+
+const withTestsFiles = withTests({
+  results,
+});
+
+storiesOf('Addons|jest', module)
+  .addDecorator(withTestsFiles('addon-jest'))
+  .add('withTests', () => 'This story shows test results');

examples/html-kitchen-sink/tests/addon-jest.config.json

@@ -0,0 +1,10 @@
+{
+  "rootDir": "../../..",
+  "verbose": true,
+  "notify": true,
+  "transform": {
+    ".*": "babel-jest"
+  },
+  "setupTestFrameworkScriptFile": "<rootDir>/scripts/jest.init.js",
+  "testMatch": ["<rootDir>/examples/official-storybook/tests/addon-jest.test.js"]
+}

examples/html-kitchen-sink/tests/addon-jest.test.js

@@ -0,0 +1,32 @@
+// This file is excluded from the `/scripts/test.js` script. (see root `jest.config.js` file)
+test('true should be true', () => {
+  expect(true).toBe(true);
+});
+
+describe('In a describe: ', () => {
+  test('true should still be true', () => {
+    expect(true).toBe(true);
+  });
+
+  test('a list should contain 3 items', () => {
+    expect(['a', 'b', '3']).toHaveLength(3);
+  });
+
+  test('everything is awesome', () => {
+    expect('everything is all right').toEqual('everything is awesome');
+  });
+});
+
+describe('A bunch of failing tests: ', () => {
+  test('true should still be true', () => {
+    expect(true).toBe(false);
+  });
+
+  test('a list should contain 3 items', () => {
+    expect(['a', 'b', '3']).toContain(301);
+  });
+
+  test('should work', () => {
+    expect(() => {}).toThrow();
+  });
+});

examples/html-kitchen-sink/tests/htmlshots.test.js

@@ -3,7 +3,7 @@ import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-story
 
 initStoryshots({
   framework: 'html',
-  integrityOptions: { cwd: path.join(__dirname, 'stories') },
-  configPath: path.join(__dirname, '.storybook'),
+  integrityOptions: { cwd: path.resolve(__dirname, '../stories') },
+  configPath: path.resolve(__dirname, '../.storybook'),
   test: multiSnapshotWithOptions({}),
 });