Updating Text rendering to use react-testing-library

src/rendering/Text/__snapshots__/test.js.snap

@@ -18,47 +18,38 @@ Object {
 `;
 
 exports[`Text positioning text 1`] = `
+<DocumentFragment>
+  <svg>
     <text
-  style={
+      style="font-size: 16px; font-family: Arial;"
-    Object {
-      "fontFamily": "Arial",
-      "fontSize": "16px",
-    }
-  }
       transform="translate(1 2)"
     >
       Example
     </text>
+  </svg>
+</DocumentFragment>
 `;
 
 exports[`Text rendering 1`] = `
+<DocumentFragment>
+  <svg>
     <text
-  style={
+      style="font-size: 16px; font-family: Arial;"
-    Object {
-      "fontFamily": "Arial",
-      "fontSize": "16px",
-    }
-  }
     >
       Example
     </text>
+  </svg>
+</DocumentFragment>
 `;
 
 exports[`Text rendering quoted text 1`] = `
+<DocumentFragment>
+  <svg>
     <text
-  style={
+      style="font-size: 16px; font-family: Arial;"
-    Object {
-      "fontFamily": "Arial",
-      "fontSize": "16px",
-    }
-  }
     >
       <tspan
-    style={
+        style="fill: #908c83;"
-      Object {
-        "fill": "#908c83",
-      }
-    }
       >
         “
       </tspan>
@@ -66,27 +57,23 @@ exports[`Text rendering quoted text 1`] = `
         Example
       </tspan>
       <tspan
-    style={
+        style="fill: #908c83;"
-      Object {
-        "fill": "#908c83",
-      }
-    }
       >
         ”
       </tspan>
     </text>
+  </svg>
+</DocumentFragment>
 `;
 
 exports[`Text rendering with a theme 1`] = `
+<DocumentFragment>
+  <svg>
     <text
-  style={
+      style="font-size: 16px; font-family: Arial; fill: #fff;"
-    Object {
-      "fill": "#fff",
-      "fontFamily": "Arial",
-      "fontSize": "16px",
-    }
-  }
     >
       Example
     </text>
+  </svg>
+</DocumentFragment>
 `;

src/rendering/Text/test.js

@@ -1,35 +1,43 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'react-testing-library';
 
 import Text, { layout } from 'rendering/Text';
 
 describe('Text', () => {
   test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
+      <svg>
         <Text>Example</Text>
+      </svg>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('positioning text', () => {
-    const component = shallow(
+    const { asFragment } = render(
+      <svg>
         <Text transform="translate(1 2)">Example</Text>
+      </svg>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering with a theme', () => {
-    const component = shallow(
+    const { asFragment } = render(
+      <svg>
         <Text theme="anchor">Example</Text>
+      </svg>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('rendering quoted text', () => {
-    const component = shallow(
+    const { asFragment } = render(
+      <svg>
         <Text quoted={ true }>Example</Text>
+      </svg>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('layout', () => {