test(ui): fix volatile snapshot tests

packages/ui/test/AlignmentBoxWithLabel.test.js

 import React from 'react'
 import { shallow, mount, render } from 'enzyme'
 import renderer from 'react-test-renderer'
+import 'jest-styled-components'
 
 import AlignmentBox from '../src/atoms/AlignmentBox'
 import AlignmentBoxWithLabel from '../src/molecules/AlignmentBoxWithLabel'

packages/ui/test/AlignmentTool.test.js

 import React from 'react'
 import { shallow, mount } from 'enzyme'
 import renderer from 'react-test-renderer'
+import 'jest-styled-components'
 
 import AlignmentBoxWithLabel from '../src/molecules/AlignmentBoxWithLabel'
 import AlignmentTool from '../src/molecules/AlignmentTool'

packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlignmentBoxWithLabel is rendered correctly 1`] = `
+.c0 {
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
+  cursor: pointer;
+  height: 26px;
+  width: 17px;
+  border-style: solid;
+  border-color: #666;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  background-color: transparent;
+}
+
+.c0:hover {
+  background-color: #b3b3b3;
+}
+
 <div
   className="root"
 >
@@ -10,7 +28,7 @@ exports[`AlignmentBoxWithLabel is rendered correctly 1`] = `
     Left
   </span>
   <div
-    className="sc-bdVaJa iAeTlR"
+    className="c0"
     id="left"
     onClick={[Function]}
     role="presentation"

packages/ui/test/__snapshots__/AlignmentTool.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlignmentTool is rendered correctly 1`] = `
+.c0 {
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
+  cursor: pointer;
+  height: 26px;
+  width: 17px;
+  border-style: solid;
+  border-color: #666;
+  border-top-width: 1px;
+  border-right-width: 0;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  background-color: transparent;
+}
+
+.c0:hover {
+  background-color: #b3b3b3;
+}
+
+.c1 {
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
+  cursor: pointer;
+  height: 26px;
+  width: 17px;
+  border-style: solid;
+  border-color: #666;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 0;
+  background-color: transparent;
+}
+
+.c1:hover {
+  background-color: #b3b3b3;
+}
+
 <div
   className="root"
 >
@@ -13,7 +49,7 @@ exports[`AlignmentTool is rendered correctly 1`] = `
       Left
     </span>
     <div
-      className="sc-bdVaJa ieYRgr"
+      className="c0"
       id="left"
       onClick={[Function]}
       role="presentation"
@@ -31,7 +67,7 @@ exports[`AlignmentTool is rendered correctly 1`] = `
       right
     </span>
     <div
-      className="sc-bdVaJa fCBdDA"
+      className="c1"
       id="right"
       onClick={[Function]}
       role="presentation"