Merge 1e27ebf into 6192168

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

@@ -3,54 +3,52 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
-import { enzymeFind } from 'styled-components/test-utils';
+import { render, cleanup } from 'react-testing-library';
 
 import A from '../index';
 
 const href = 'http://mxstbr.com/';
 const children = <h1>Test</h1>;
-const renderComponent = (props = {}) => {
-  const wrapper = mount(
+const renderComponent = (props = {}) =>
+  render(
     <A href={href} {...props}>
       {children}
     </A>,
   );
 
-  return enzymeFind(wrapper, A);
-};
-
 describe('<A />', () => {
+  afterEach(cleanup);
+
   it('should render an <a> tag', () => {
-    const renderedComponent = renderComponent();
-    expect(renderedComponent.type()).toEqual('a');
+    const { container } = renderComponent();
+    expect(container.querySelector('a')).not.toBeNull();
   });
 
   it('should have an href attribute', () => {
-    const renderedComponent = renderComponent();
-    expect(renderedComponent.prop('href')).toEqual(href);
+    const { container } = renderComponent();
+    expect(container.querySelector('a').href).toEqual(href);
   });
 
   it('should have children', () => {
-    const renderedComponent = renderComponent();
-    expect(renderedComponent.contains(children)).toEqual(true);
+    const { container } = renderComponent();
+    expect(container.querySelector('a').children).toHaveLength(1);
   });
 
-  it('should have a className attribute', () => {
+  it('should have a class attribute', () => {
     const className = 'test';
-    const renderedComponent = renderComponent({ className });
-    expect(renderedComponent.find('a').hasClass(className)).toEqual(true);
+    const { container } = renderComponent({ className });
+    expect(container.querySelector('a').classList).toContain(className);
   });
 
   it('should adopt a target attribute', () => {
     const target = '_blank';
-    const renderedComponent = renderComponent({ target });
-    expect(renderedComponent.prop('target')).toEqual(target);
+    const { container } = renderComponent({ target });
+    expect(container.querySelector('a').target).toEqual(target);
   });
 
   it('should adopt a type attribute', () => {
     const type = 'text/html';
-    const renderedComponent = renderComponent({ type });
-    expect(renderedComponent.prop('type')).toEqual(type);
+    const { container } = renderComponent({ type });
+    expect(container.querySelector('a').type).toEqual(type);
   });
 });

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

@@ -1,32 +1,29 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { enzymeFind } from 'styled-components/test-utils';
+import { render, cleanup } from 'react-testing-library';
 
 import A from '../A';
 
 describe('<A />', () => {
+  afterEach(cleanup);
+
   it('should render an <a> tag', () => {
-    const wrapper = mount(<A />);
-    const renderedComponent = enzymeFind(wrapper, A);
-    expect(renderedComponent.type()).toEqual('a');
+    const { container } = render(<A />);
+    expect(container.querySelector('a')).not.toBeNull();
   });
 
-  it('should have a className attribute', () => {
-    const wrapper = mount(<A />);
-    const renderedComponent = enzymeFind(wrapper, A);
-    expect(renderedComponent.prop('className')).toBeDefined();
+  it('should have a class attribute', () => {
+    const { container } = render(<A />);
+    expect(container.querySelector('a').hasAttribute('class')).toBe(true);
   });
 
   it('should adopt a valid attribute', () => {
     const id = 'test';
-    const wrapper = mount(<A id={id} />);
-    const renderedComponent = enzymeFind(wrapper, A);
-    expect(renderedComponent.prop('id')).toEqual(id);
+    const { container } = render(<A id={id} />);
+    expect(container.querySelector('a').id).toEqual(id);
   });
 
   it('should not adopt an invalid attribute', () => {
-    const wrapper = mount(<A attribute="test" />);
-    const renderedComponent = enzymeFind(wrapper, A);
-    expect(renderedComponent.prop('attribute')).toBeUndefined();
+    const { container } = render(<A attribute="test" />);
+    expect(container.querySelector('a[attribute="test"]')).toBeNull();
   });
 });

app/components/Button/tests/StyledButton.test.js

@@ -1,32 +1,29 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { enzymeFind } from 'styled-components/test-utils';
+import { render, cleanup } from 'react-testing-library';
 
 import StyledButton from '../StyledButton';
 
 describe('<StyledButton />', () => {
+  afterEach(cleanup);
+
   it('should render an <button> tag', () => {
-    const wrapper = mount(<StyledButton />);
-    const renderedComponent = enzymeFind(wrapper, StyledButton);
-    expect(renderedComponent.type()).toEqual('button');
+    const { container } = render(<StyledButton />);
+    expect(container.querySelector('button')).not.toBeNull();
   });
 
-  it('should have a className attribute', () => {
-    const wrapper = mount(<StyledButton />);
-    const renderedComponent = enzymeFind(wrapper, StyledButton);
-    expect(renderedComponent.prop('className')).toBeDefined();
+  it('should have a class attribute', () => {
+    const { container } = render(<StyledButton />);
+    expect(container.querySelector('button').hasAttribute('class')).toBe(true);
   });
 
   it('should adopt a valid attribute', () => {
     const id = 'test';
-    const wrapper = mount(<StyledButton id={id} />);
-    const renderedComponent = enzymeFind(wrapper, StyledButton);
-    expect(renderedComponent.prop('id')).toEqual(id);
+    const { container } = render(<StyledButton id={id} />);
+    expect(container.querySelector('button').id).toEqual(id);
   });
 
   it('should not adopt an invalid attribute', () => {
-    const wrapper = mount(<StyledButton attribute="test" />);
-    const renderedComponent = enzymeFind(wrapper, StyledButton);
-    expect(renderedComponent.prop('attribute')).toBeUndefined();
+    const { container } = render(<StyledButton attribute="test" />);
+    expect(container.querySelector('button[attribute="test"]')).toBeNull();
   });
 });

app/components/Button/tests/Wrapper.test.js

@@ -1,32 +1,29 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { enzymeFind } from 'styled-components/test-utils';
+import { render, cleanup } from 'react-testing-library';
 
 import Wrapper from '../Wrapper';
 
 describe('<Wrapper />', () => {
+  afterEach(cleanup);
+
   it('should render an <div> tag', () => {
-    const wrapper = mount(<Wrapper />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.type()).toEqual('div');
+    const { container } = render(<Wrapper />);
+    expect(container.querySelector('div')).not.toBeNull();
   });
 
-  it('should have a className attribute', () => {
-    const wrapper = mount(<Wrapper />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.prop('className')).toBeDefined();
+  it('should have a class attribute', () => {
+    const { container } = render(<Wrapper />);
+    expect(container.querySelector('div').hasAttribute('class')).toBe(true);
   });
 
   it('should adopt a valid attribute', () => {
     const id = 'test';
-    const wrapper = mount(<Wrapper id={id} />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.prop('id')).toEqual(id);
+    const { container } = render(<Wrapper id={id} />);
+    expect(container.querySelector('div').id).toEqual(id);
   });
 
   it('should not adopt an invalid attribute', () => {
-    const wrapper = mount(<Wrapper attribute="test" />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.prop('attribute')).toBeUndefined();
+    const { container } = render(<Wrapper attribute="test" />);
+    expect(container.querySelector('div[attribute="test"]')).toBeNull();
   });
 });

app/components/Button/tests/index.test.js

@@ -3,57 +3,59 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { cleanup, fireEvent, render } from 'react-testing-library';
 
 import Button from '../index';
 
 const handleRoute = () => {};
 const href = 'http://mxstbr.com';
 const children = <h1>Test</h1>;
 const renderComponent = (props = {}) =>
-  mount(
+  render(
     <Button href={href} {...props}>
       {children}
     </Button>,
   );
 
 describe('<Button />', () => {
+  afterEach(cleanup);
+
   it('should render an <a> tag if no route is specified', () => {
-    const renderedComponent = renderComponent({ href });
-    expect(renderedComponent.find('a')).toHaveLength(1);
+    const { container } = renderComponent({ href });
+    expect(container.querySelector('a')).not.toBeNull();
   });
 
   it('should render a <button> tag to change route if the handleRoute prop is specified', () => {
-    const renderedComponent = renderComponent({ handleRoute });
-    expect(renderedComponent.find('button')).toHaveLength(1);
+    const { container } = renderComponent({ handleRoute });
+    expect(container.querySelector('button')).toBeDefined();
   });
 
   it('should have children', () => {
-    const renderedComponent = renderComponent();
-    expect(renderedComponent.contains(children)).toEqual(true);
+    const { container } = renderComponent();
+    expect(container.querySelector('a').children).toHaveLength(1);
   });
 
   it('should handle click events', () => {
     const onClickSpy = jest.fn();
-    const renderedComponent = renderComponent({ onClick: onClickSpy });
-    renderedComponent.find('a').simulate('click');
+    const { container } = renderComponent({ onClick: onClickSpy });
+    fireEvent.click(container.querySelector('a'));
     expect(onClickSpy).toHaveBeenCalled();
   });
 
-  it('should have a className attribute', () => {
-    const renderedComponent = renderComponent();
-    expect(renderedComponent.find('a').prop('className')).toBeDefined();
+  it('should have a class attribute', () => {
+    const { container } = renderComponent();
+    expect(container.querySelector('a').hasAttribute('class')).toBe(true);
   });
 
   it('should not adopt a type attribute when rendering an <a> tag', () => {
     const type = 'text/html';
-    const renderedComponent = renderComponent({ href, type });
-    expect(renderedComponent.find('a').prop('type')).toBeUndefined();
+    const { container } = renderComponent({ href, type });
+    expect(container.querySelector(`a[type="${type}"]`)).toBeNull();
   });
 
   it('should not adopt a type attribute when rendering a button', () => {
     const type = 'submit';
-    const renderedComponent = renderComponent({ handleRoute, type });
-    expect(renderedComponent.find('button').prop('type')).toBeUndefined();
+    const { container } = renderComponent({ handleRoute, type });
+    expect(container.querySelector('button').getAttribute('type')).toBeNull();
   });
 });

app/components/Footer/tests/Wrapper.test.js

@@ -1,32 +1,31 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { enzymeFind } from 'styled-components/test-utils';
+import { cleanup, render } from 'react-testing-library';
 
 import Wrapper from '../Wrapper';
 
 describe('<Wrapper />', () => {
-  it('should render a <footer> tag', () => {
-    const wrapper = mount(<Wrapper />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.type()).toEqual('footer');
+  afterEach(cleanup);
+
+  it('should render an <footer> tag', () => {
+    const { container } = render(<Wrapper />);
+    expect(container.querySelector('footer')).not.toBeNull();
   });
 
-  it('should have a className attribute', () => {
-    const wrapper = mount(<Wrapper />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.prop('className')).toBeDefined();
+  it('should have a class attribute', () => {
+    const { container } = render(<Wrapper />);
+    expect(container.querySelector('footer').hasAttribute('class')).toBe(true);
   });
 
   it('should adopt a valid attribute', () => {
     const id = 'test';
-    const wrapper = mount(<Wrapper id={id} />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.prop('id')).toEqual(id);
+    const { container } = render(<Wrapper id={id} />);
+    expect(container.querySelector('footer').id).toEqual(id);
   });
 
   it('should not adopt an invalid attribute', () => {
-    const wrapper = mount(<Wrapper attribute="test" />);
-    const renderedComponent = enzymeFind(wrapper, Wrapper);
-    expect(renderedComponent.prop('attribute')).toBeUndefined();
+    const { container } = render(<Wrapper attribute="test" />);
+    expect(
+      container.querySelector('footer').getAttribute('attribute'),
+    ).toBeNull();
   });
 });

app/components/Footer/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer /> should render and match the snapshot 1`] = `
+<footer
+  className="Wrapper-wcfdfo-0 dPvBog"
+>
+  <section>
+    <span>
+      This project is licensed under the MIT license.
+    </span>
+  </section>
+  <section>
+    <div
+      className="Wrapper-xnjoq9-0 dNmQIR"
+    >
+      <select
+        className="Select-sc-1sm01tk-0 wIjFa"
+        onChange={[Function]}
+        value="en"
+      >
+        <option
+          value="en"
+        >
+          en
+        </option>
+        <option
+          value="de"
+        >
+          de
+        </option>
+      </select>
+    </div>
+  </section>
+  <section>
+    <span>
+      
+      Made with love by 
+      <a
+        className="A-br8h0y-0 dwVNvo"
+        href="https://twitter.com/mxstbr"
+      >
+        Max Stoiber
+      </a>
+      .
+    
+    </span>
+  </section>
+</footer>
+`;