Add snapshot tests

Author: lttb

.babelrc

@@ -1,6 +1,9 @@
 {
+  presets: [
+    'react',
+  ],
   plugins: [
     'transform-es2015-modules-commonjs',
-    ["transform-object-rest-spread", { "useBuiltIns": true }],
+    ['transform-object-rest-spread', { useBuiltIns: true }],
   ]
 }

package.json

@@ -38,7 +38,9 @@
     "babel-core": "^6.23.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-react": "^6.23.0",
     "eslint": "^3.13.0",
-    "jest": "^18.1.0"
+    "jest": "^18.1.0",
+    "react-test-renderer": "^15.4.2"
   }
 }

src/tests/.eslintrc

@@ -0,0 +1,4 @@
+rules:
+  import/no-extraneous-dependencies:
+    - error
+    - devDependencies: true

src/tests/App.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import Styled from '../'
+
+
+const styled = Styled({
+  app: {
+    margin: '50px',
+  },
+  header: {
+    padding: '10px',
+  },
+  content: {
+    padding: ({ padding }) => `${padding}px`,
+  },
+  h1: {
+    color: 'red',
+  },
+  p: {
+    border: '1px solid black',
+  },
+  text: {
+    color: 'green',
+  },
+  button: {
+    margin: ({ margin = 0 }) => `${margin}px`,
+  },
+})
+
+const Header = () => (
+  <styled.header>
+    <styled.h1>Just H1</styled.h1>
+    <styled.h1 force composes="text">Force test</styled.h1>
+  </styled.header>
+)
+
+const Content = () => (
+  <styled.section
+    composes="content"
+    attrs={{
+      'data-name': 'content',
+    }}
+    padding={20}
+  >
+    <styled.p composes="text h1">compose multiple classes test</styled.p>
+
+    <styled.button>primitive test</styled.button>
+    <styled.button margin={10}>dynamic primitive test</styled.button>
+  </styled.section>
+)
+
+export default () => (
+  <styled.app>
+    <Header />
+
+    <Content />
+  </styled.app>
+)

src/tests/__snapshots__/index.spec.jsx.snap

@@ -0,0 +1,32 @@
+exports[`test renders correctly 1`] = `
+<div
+  className="app-0-0">
+  <header
+    className="header-0-1">
+    <h1
+      className="h1-0-3">
+      Just H1
+    </h1>
+    <h1
+      className="text-0-5">
+      Force test
+    </h1>
+  </header>
+  <section
+    className="content-0-14 content-0-9"
+    data-name="content">
+    <p
+      className="text-0-5 h1-0-3 p-0-4">
+      compose multiple classes test
+    </p>
+    <button
+      className="button-0-6">
+      primitive test
+    </button>
+    <button
+      className="button-0-24 button-0-22">
+      dynamic primitive test
+    </button>
+  </section>
+</div>
+`;

src/tests/index.spec.jsx

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer'
+
+import React from 'react'
+import App from './App'
+
+
+it('renders correctly', () => {
+  const tree = renderer.create(<App />).toJSON()
+
+  expect(tree).toMatchSnapshot()
+})