diff --git a/components/note/__tests__/__snapshots__/index.test.tsx.snap b/components/note/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..012d1d1
--- /dev/null
+++ b/components/note/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Note should render correctly 1`] = `
+"<div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>note<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #eaeaea;
+          color: #000;
+          background-color: #fff;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div>"
+`;
+
+exports[`Note should work with different styles 1`] = `
+"<div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>secondary<style>
+        .note {
+          padding: calc(8pt / 2) calc(16pt / 2);
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #666;
+          color: #666;
+          background-color: #fff;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>success<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #0070f3;
+          color: #fff;
+          background-color: #0070f3;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>warning<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #000;
+          color: #fff;
+          background-color: #000;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>error<style>
+        .note {
+          padding: calc(8pt / 2) calc(16pt / 2);
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #000;
+          color: #fff;
+          background-color: #000;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div></div>"
+`;
+
+exports[`Note should work with different types 1`] = `
+"<div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>secondary<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #666;
+          color: #666;
+          background-color: #fff;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>success<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #0070f3;
+          color: #0070f3;
+          background-color: #fff;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>warning<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #f5a623;
+          color: #f5a623;
+          background-color: #fff;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div><div class=\\"note \\"><span class=\\"label\\"><b>note:</b></span>error<style>
+        .note {
+          padding: 8pt 16pt;
+          font-size: 14px;
+          line-height: 1.8;
+          border: 1px solid #ff0000;
+          color: #ff0000;
+          background-color: #fff;
+          border-radius: 5px;
+        }
+        
+        .note :global(p) {
+          margin: 0
+        }
+        
+        .label {
+          text-transform: uppercase;
+          user-select: none;
+          line-height: 1.5;
+          padding-right: 4pt;
+        }
+        
+      </style></div></div>"
+`;
diff --git a/components/note/__tests__/index.test.tsx b/components/note/__tests__/index.test.tsx
new file mode 100644
index 0000000..388065e
--- /dev/null
+++ b/components/note/__tests__/index.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Note } from 'components'
+import { updateWrapper } from 'tests/utils'
+
+describe('Note', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<Note>note</Note>)
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should work with different types', () => {
+    const wrapper = mount(
+      <div>
+        <Note type="secondary">secondary</Note>
+        <Note type="success">success</Note>
+        <Note type="warning">warning</Note>
+        <Note type="error">error</Note>
+      </div>
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('custom labels should be rendered', async () => {
+    const wrapper = mount(<Note label={false}>note</Note>)
+    expect(wrapper.find('.label').length).toBe(0)
+    
+    wrapper.setProps({ label: 'test' })
+    await updateWrapper(wrapper)
+    expect(wrapper.find('.label').text().toLowerCase())
+      .toContain('test')
+  })
+  
+  it('should work with different styles', () => {
+    const wrapper = mount(
+      <div>
+        <Note type="secondary" small>secondary</Note>
+        <Note type="success" filled>success</Note>
+        <Note filled>warning</Note>
+        <Note filled small>error</Note>
+      </div>
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+})