diff --git a/packages/ui/test/AlignmentBoxWithLabel.test.js b/packages/ui/test/AlignmentBoxWithLabel.test.js
index 1656a648bffff726f60374957500b7653e76716b..8bb6ed97f6c4c9e8e474afb01e0f457cb97b6300 100644
--- a/packages/ui/test/AlignmentBoxWithLabel.test.js
+++ b/packages/ui/test/AlignmentBoxWithLabel.test.js
@@ -1,6 +1,7 @@
 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'
diff --git a/packages/ui/test/AlignmentTool.test.js b/packages/ui/test/AlignmentTool.test.js
index e43ae42f7cabe7b381414611dad7362be62c56c5..d326e5740793a5c3ba4461b3ec375d50dc89e78f 100644
--- a/packages/ui/test/AlignmentTool.test.js
+++ b/packages/ui/test/AlignmentTool.test.js
@@ -1,6 +1,7 @@
 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'
diff --git a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
index 187ac4791129dbb87378ab0eeaf3e59b289735b0..1e7b29b67d1a27d6cb90d7323a2aaddc52ab6053 100644
--- a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
@@ -1,6 +1,24 @@
 // 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"
diff --git a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
index a16d41103c49e2bdeb799c2d27494788783b0b86..970c0864a84f66a1fbf01013c5b0993534dfdade 100644
--- a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
@@ -1,6 +1,42 @@
 // 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"