Migrate to snapshot testing with react-test-renderer

WordPress · Oct 30, 2018 · 4c4a70e · 4c4a70e
1 parent f90bf36
commit 4c4a70e
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
@@ -55,3 +55,20 @@ exports[`Slot should render a string Fill with HTML wrapper when render props us
 exports[`Slot should render empty Fills 1`] = `<div />`;
 
 exports[`Slot should render empty Fills without HTML wrapper when render props used 1`] = `<div />`;
+
+exports[`Slot should render in expected order 1`] = `
+Array [
+  <div>
+    first
+    second
+  </div>,
+  <button
+    onClick={[Function]}
+    type="button"
+  />,
+  <button
+    onClick={[Function]}
+    type="button"
+  />,
+]
+`;
diff --git a/packages/components/src/slot-fill/test/slot.js b/packages/components/src/slot-fill/test/slot.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
 import { isEmpty } from 'lodash';
 import ReactTestRenderer from 'react-test-renderer';
 
@@ -171,43 +170,43 @@ describe( 'Slot', () => {
 	} );
 
 	it( 'should render in expected order', () => {
-		const element = mount(
+		const testRenderer = ReactTestRenderer.create(
 			<Provider>
 				<div key="slot">
 					<Slot name="egg" />
 				</div>
 			</Provider>
 		);
 
-		element.setProps( {
-			children: [
+		testRenderer.update(
+			<Provider>
 				<div key="slot">
 					<Slot name="egg" />
-				</div>,
-				<Filler name="egg" key="first" text="first" />,
-				<Filler name="egg" key="second" text="second" />,
-			],
-		} );
-
-		element.setProps( {
-			children: [
+				</div>
+				<Filler name="egg" key="first" text="first" />
+				<Filler name="egg" key="second" text="second" />
+			</Provider>
+		);
+
+		testRenderer.update(
+			<Provider>
 				<div key="slot">
 					<Slot name="egg" />
-				</div>,
-				<Filler name="egg" key="second" text="second" />,
-			],
-		} );
+				</div>
+				<Filler name="egg" key="second" text="second" />
+			</Provider>
+		);
 
-		element.setProps( {
-			children: [
+		testRenderer.update(
+			<Provider>
 				<div key="slot">
 					<Slot name="egg" />
-				</div>,
-				<Filler name="egg" key="first" text="first" />,
-				<Filler name="egg" key="second" text="second" />,
-			],
-		} );
+				</div>
+				<Filler name="egg" key="first" text="first" />
+				<Filler name="egg" key="second" text="second" />
+			</Provider>
+		);
 
-		expect( element.html() ).toBe( '<div>firstsecond</div>' );
+		expect( testRenderer.toJSON() ).toMatchSnapshot();
 	} );
 } );