Testing: Add first test using snapshots testing (#3590)

components/notice/test/__snapshots__/index.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Notice should match snapshot 1`] = `
+<div
+  className="notice notice-alt notice-example is-dismissible"
+>
+  <button
+    className="notice-dismiss"
+    onClick={[Function]}
+    type="button"
+  >
+    <span
+      className="screen-reader-text"
+    >
+      Dismiss this notice
+    </span>
+  </button>
+</div>
+`;

components/notice/test/index.js

@@ -9,13 +9,12 @@ import { shallow } from 'enzyme';
 import Notice from '../index';
 
 describe( 'Notice', () => {
-	it( 'should have valid class names', () => {
+	it( 'should match snapshot', () => {
 		const wrapper = shallow( <Notice status="example" /> );
-		expect( wrapper.hasClass( 'notice' ) ).toBe( true );
-		expect( wrapper.hasClass( 'notice-alt' ) ).toBe( true );
-		expect( wrapper.hasClass( 'notice-example' ) ).toBe( true );
-		expect( wrapper.hasClass( 'is-dismissible' ) ).toBe( true );
+
+		expect( wrapper ).toMatchSnapshot();
 	} );
+
 	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
 		const wrapper = shallow( <Notice isDismissible={ false } /> );
 		expect( wrapper.hasClass( 'is-dismissible' ) ).toBe( false );

test/unit/setup-test-framework.js

@@ -1,14 +1,26 @@
 // `babel-jest` should be doing this instead, but apparently it's not working.
 require( 'core-js/modules/es7.object.values' );
 
-/**
- * External dependencies
- */
-import Adapter from 'enzyme-adapter-react-16';
-import Enzyme from 'enzyme';
-import 'jest-enzyme';
+// It "mocks" enzyme, so that we can delay loading of
+// the utility functions until enzyme is imported in tests.
+// Props to @gdborton for sharing this technique in his article:
+// https://medium.com/airbnb-engineering/unlocking-test-performance-migrating-from-mocha-to-jest-2796c508ec50.
+let mockEnzymeSetup = false;
 
-Enzyme.configure( { adapter: new Adapter() } );
+jest.mock( 'enzyme', () => {
+	const actualEnzyme = require.requireActual( 'enzyme' );
+	if ( ! mockEnzymeSetup ) {
+		mockEnzymeSetup = true;
+
+		// configure enzyme 3 for React, from docs: http://airbnb.io/enzyme/docs/installation/index.html
+		const Adapter = require.requireActual( 'enzyme-adapter-react-16' );
+		actualEnzyme.configure( { adapter: new Adapter() } );
+
+		// configure assertions for enzyme
+		require.requireActual( 'jest-enzyme' );
+	}
+	return actualEnzyme;
+} );
 
 // Sets spies on console object to make it possible to convert them into test failures.
 const spyError = jest.spyOn( console, 'error' );