reconfigure the way we test styled-components

Author: gretzky

app/components/Header/tests/A.test.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
 
 import A from '../A';
 
 describe('<A />', () => {
-  it('should render an <a> tag', () => {
-    const renderedComponent = render(<A />);
-    expect(renderedComponent.find('a').length).toEqual(1);
+  it('should match the snapshot', () => {
+    const renderedComponent = renderer.create(<A />).toJSON();
+    expect(renderedComponent).toMatchSnapshot();
   });
 
   it('should have a className attribute', () => {

app/components/Header/tests/Img.test.js

@@ -1,26 +1,40 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
 
 import Img from '../Img';
 
 describe('<Img />', () => {
-  it('should render an <img> tag', () => {
-    const renderedComponent = render(<Img src={'http://example.com/test.jpg'} alt={'test'} />);
-    expect(renderedComponent.find('img').length).toEqual(1);
+  it('should match the snapshot', () => {
+    const renderedComponent = renderer
+      .create(<Img src={'http://example.com/test.jpg'} alt={'test'} />)
+      .toJSON();
+    expect(renderedComponent).toMatchSnapshot();
   });
 
   it('should have a className attribute', () => {
-    const renderedComponent = mount(<Img src={'http://example.com/test.jpg'} alt={'test'} />);
+    const renderedComponent = mount(
+      <Img src={'http://example.com/test.jpg'} alt={'test'} />
+    );
     expect(renderedComponent.find('img').prop('className')).toBeDefined();
   });
 
   it('should adopt a valid attribute', () => {
-    const renderedComponent = mount(<Img src={'http://example.com/test.jpg'} alt={'test'} />);
+    const renderedComponent = mount(
+      <Img src={'http://example.com/test.jpg'} alt={'test'} />
+    );
     expect(renderedComponent.find('img').prop('alt')).toEqual('test');
   });
 
   it('should not adopt an invalid attribute', () => {
-    const renderedComponent = mount(<Img src={'http://example.com/test.jpg'} attribute={'test'} alt={'test'} />);
+    const renderedComponent = mount(
+      <Img
+        src={'http://example.com/test.jpg'}
+        attribute={'test'}
+        alt={'test'}
+      />
+    );
     expect(renderedComponent.find('img').prop('attribute')).toBeUndefined();
   });
 });

app/components/Header/tests/__snapshots__/A.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<A /> should match the snapshot 1`] = `
+.c0 {
+  color: #41addd;
+  padding: 2em 0;
+}
+
+.c0:hover {
+  color: #6cc0e5;
+}
+
+<a
+  className="c0"
+/>
+`;

app/components/Header/tests/__snapshots__/Img.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Img /> should match the snapshot 1`] = `
+.c0 {
+  width: 100%;
+  margin: 0 auto;
+  display: block;
+}
+
+<img
+  alt="test"
+  className="c0"
+  src="http://example.com/test.jpg"
+/>
+`;