Updating Messasge to use react-testing-library

src/components/Message/__snapshots__/test.js.snap

@@ -1,99 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Message rendering 1`] = `
-<div
+<DocumentFragment>
-  className="message"
->
   <div
-    className="header"
+    class="message"
+  >
+    <div
+      class="header"
     >
       <h2>
         Testing
       </h2>
     </div>
     <div
-    className="content"
+      class="content"
     >
       <p>
         Message content
       </p>
     </div>
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Message rendering with a close button 1`] = `
-<div
+<DocumentFragment>
-  className="message"
->
   <div
-    className="header"
+    class="message"
+  >
+    <div
+      class="header"
     >
       <h2>
         Testing
       </h2>
-    <button
+      <button>
-      onClick={[MockFunction]}
+        <span
-    >
+          data-component="XSquare"
-      <XSquare
+          data-props="{}"
-        color="currentColor"
-        size="24"
         />
          Close
       </button>
     </div>
     <div
-    className="content"
+      class="content"
     >
       <p>
         Message content
       </p>
     </div>
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Message rendering with icon 1`] = `
-<div
+<DocumentFragment>
-  className="message"
->
   <div
-    className="header"
+    class="message"
   >
-    <Icon />
+    <div
+      class="header"
+    >
+      Sample icon SVG
       <h2>
         Testing
       </h2>
     </div>
     <div
-    className="content"
+      class="content"
     >
       <p>
         Message content
       </p>
     </div>
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Message rendering with type 1`] = `
-<div
+<DocumentFragment>
-  className="message error"
->
   <div
-    className="header"
+    class="message error"
   >
-    <AlertOctagon
+    <div
-      color="currentColor"
+      class="header"
-      size="24"
+    >
+      <span
+        data-component="AlertOctagon"
+        data-props="{}"
       />
       <h2>
         Testing
       </h2>
     </div>
     <div
-    className="content"
+      class="content"
     >
       <p>
         Message content
       </p>
     </div>
-</div>
+  </div>
+</DocumentFragment>
 `;

src/components/Message/test.js

@@ -1,43 +1,56 @@
+jest.mock('react-feather/dist/icons/info', () =>
+  require('__mocks__/component-mock')('react-feather/dist/icons/info'));
+jest.mock('react-feather/dist/icons/alert-octagon', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/alert-octagon'
+  ));
+jest.mock('react-feather/dist/icons/alert-triangle', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/alert-triangle'
+  ));
+jest.mock('react-feather/dist/icons/x-square', () =>
+  require('__mocks__/component-mock')('react-feather/dist/icons/x-square'));
+
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'react-testing-library';
 
 import Message from 'components/Message';
 
 describe('Message', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing">
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with icon', () => {
     const Icon = () => 'Sample icon SVG';
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing" icon={ Icon }>
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with type', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing" type="error">
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with a close button', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Message heading="Testing" onClose={ jest.fn() }>
         <p>Message content</p>
       </Message>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 });