From 371b262e550d74f5f66715d056319847661786ff Mon Sep 17 00:00:00 2001
From: Kotaro Sugawara <kotarella1110@gmail.com>
Date: Fri, 20 Jul 2018 16:01:25 +0900
Subject: [PATCH] Fixed storyshots.test.js Separate snapshots into the folders
 close to each story https://github.com/storybooks/storybook/issues/887

---
 package.json                                  |  2 +
 src/App/__snapshots__/index.stories.storyshot | 57 +++++++++++++++++++
 src/storyshots.test.js                        | 13 ++++-
 yarn.lock                                     | 25 +++++++-
 4 files changed, 93 insertions(+), 4 deletions(-)
 create mode 100644 src/App/__snapshots__/index.stories.storyshot

diff --git a/package.json b/package.json
index 7313f34..b6db175 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,8 @@
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.9.1",
     "husky": "^1.0.0-rc.13",
+    "jest-snapshot": "^23.4.1",
+    "jest-styled-components": "^5.0.1",
     "lint-staged": "^7.2.0",
     "prettier": "^1.13.7",
     "prh": "^5.4.3",
diff --git a/src/App/__snapshots__/index.stories.storyshot b/src/App/__snapshots__/index.stories.storyshot
new file mode 100644
index 0000000..a2ac782
--- /dev/null
+++ b/src/App/__snapshots__/index.stories.storyshot
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileProperties App Group|App Welcome to Storybook 1`] = `
+.c0 {
+  text-align: center;
+}
+
+.c1 {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.c2 {
+  -webkit-animation: iVXCSc infinite 20s linear;
+  animation: iVXCSc infinite 20s linear;
+  height: 80px;
+}
+
+.c3 {
+  font-size: 1.5em;
+}
+
+.c4 {
+  font-size: large;
+}
+
+<div
+  className="c0"
+>
+  <header
+    className="c1"
+  >
+    <img
+      alt="logo"
+      className="c2"
+      src="logo.svg"
+    />
+    <h1
+      className="c3"
+      data-test="app-title"
+    >
+      Welcome to React
+    </h1>
+  </header>
+  <p
+    className="c4"
+  >
+    To get started, edit 
+    <code>
+      src/App/index.js
+    </code>
+     and save to reload.
+  </p>
+</div>
+`;
diff --git a/src/storyshots.test.js b/src/storyshots.test.js
index 9b14d0d..9f813c7 100644
--- a/src/storyshots.test.js
+++ b/src/storyshots.test.js
@@ -1,3 +1,12 @@
-import initStoryshots from '@storybook/addon-storyshots';
+import initStoryshots, {
+  multiSnapshotWithOptions,
+} from '@storybook/addon-storyshots';
+import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
+import { addSerializer } from 'jest-snapshot';
 
-initStoryshots();
+addSerializer(styleSheetSerializer);
+
+initStoryshots({
+  suite: 'FileProperties',
+  test: multiSnapshotWithOptions({}),
+});
diff --git a/yarn.lock b/yarn.lock
index 4bf34f3..4b12027 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3381,6 +3381,15 @@ css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
 
+css@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.3.tgz#f861f4ba61e79bedc962aa548e5780fd95cbc6be"
+  dependencies:
+    inherits "^2.0.1"
+    source-map "^0.1.38"
+    source-map-resolve "^0.5.1"
+    urix "^0.1.0"
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -6446,7 +6455,7 @@ jest-runtime@^20.0.4:
     strip-bom "3.0.0"
     yargs "^7.0.2"
 
-jest-snapshot@>=20.0.3:
+jest-snapshot@>=20.0.3, jest-snapshot@^23.4.1:
   version "23.4.1"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.4.1.tgz#090de9acae927f6a3af3005bda40d912b83e9c96"
   dependencies:
@@ -6479,6 +6488,12 @@ jest-specific-snapshot@^0.5.0:
   dependencies:
     jest-snapshot ">=20.0.3"
 
+jest-styled-components@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-5.0.1.tgz#386c5a161a0f5e783444d624bfc18c6d228d1277"
+  dependencies:
+    css "^2.2.1"
+
 jest-util@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-20.0.3.tgz#0c07f7d80d82f4e5a67c6f8b9c3fe7f65cfd32ad"
@@ -10219,7 +10234,7 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   dependencies:
@@ -10243,6 +10258,12 @@ source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
+source-map@^0.1.38:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
 source-map@^0.4.2, source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"