Add helpful test failures when incorrect require was used

When not requiring the jest specific unexpected-react, or using with
the wrong renderer, fail the test with a message show how to fix it,
rather than failing with "unknown assertion"

src/test-renderer-jest.js

@@ -33,7 +33,27 @@ module.exports = {
     jestSnapshotAssertions.installInto(expect);
     snapshotFunctionType.installInto(expect);
     snapshotFunctionAssertions.installInto(expect);
-
+    expect.addType({
+          name: 'RawReactTestRendererJson',
+          base: 'object',
+          identify: function (value) {
+              return value && typeof value === 'object' && value.props && value.children && value.type;
+          }
+      });
+
+      expect.addAssertion('<RawReactTestRendererJson> to match snapshot', function (expect, subject) {
+          expect.errorMode = 'bubble';
+          expect.fail({
+              message: function (output) {
+                  return output.text('To assert snapshots, use the testRenderer directly, not the result of `.toJSON()`')
+                      .nl().i()
+                      .text('e.g.')
+                      .nl().i()
+                      .text('  const testRenderer = ReactTestRenderer.create(<MyComponent />);').nl().i()
+                      .text('  expect(testRenderer, \'to match snapshot\');');
+              }
+          });
+      });
   },
 
   clearAll() {

src/test-renderer.js

@@ -5,11 +5,51 @@ module.exports = {
   name: 'unexpected-react-test-renderer',
 
   installInto(expect) {
-
-    expect.installPlugin(require('magicpen-prism'));
-
-    types.installInto(expect);
-    testRendererAssertions.installInto(expect);
+
+      expect.installPlugin(require('magicpen-prism'));
+
+      types.installInto(expect);
+      testRendererAssertions.installInto(expect);
+      expect.addType({
+          name: 'RawReactTestRendererJson',
+          base: 'object',
+          identify: function (value) {
+              return value && typeof value === 'object' && value.props && value.children && value.type;
+          }
+      });
+      expect.addAssertion([
+          '<ReactTestRenderer|ReactTestRendererOutput> to match snapshot',
+          '<ReactTestRenderer|ReactTestRendererOutput> to satisfy snapshot',
+      ], function (expect) {
+
+          expect.errorMode = 'bubble';
+          expect.fail({
+              message: function (output) {
+                  return output.text('To use the `')
+                      .error(expect.testDescription)
+                      .text('` assertion with the test renderer, require unexpected-react as `require(\'unexpected-react/test-renderer-jest\');`');
+              }
+          });
+      });
+
+      expect.addAssertion([
+          '<RawReactTestRendererJson> to match snapshot',
+          '<RawReactTestRendererJson> to satisfy snapshot',
+      ], function (expect) {
+
+          expect.errorMode = 'bubble';
+          expect.fail({
+              message: function (output) {
+                  return output.text('To use the `')
+                      .error(expect.testDescription)
+                      .text('` assertion with the test renderer, require unexpected-react as `require(\'unexpected-react/test-renderer-jest\');`')
+                      .nl().i()
+                      .nl().i()
+                      .text('Also, don\'t pass the JSON, pass the test renderer directly');
+              }
+          });
+      });
+
   },
 
   clearAll() {

src/tests/general/incorrect-require/standard-instead-of-jest.spec.js

@@ -0,0 +1,58 @@
+
+import EmulateDom from '../../helpers/emulateDom';
+
+import Unexpected from 'unexpected';
+import UnexpectedReact from '../../../unexpected-react';
+
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+
+import ClickCounter from '../../components/ClickCounter';
+
+const expect = Unexpected.clone().use(UnexpectedReact);
+
+describe('standard-instead-of-jest', function () {
+
+    it('shows a helpful error message when asserting using `to match snapshot`', function () {
+        expect(() => expect(<ClickCounter />, 'to match snapshot'), 'to throw',
+            [
+                'To use the `to match snapshot` assertion with the shallow and full DOM renderers, require unexpected-react as `require(\'unexpected-react/jest\');`',
+                '',
+                ''
+            ].join('\n')
+        );
+    });
+
+    it('shows a helpful error message when asserting using `to satisfy snapshot`', function () {
+        expect(() => expect(<ClickCounter />, 'to satisfy snapshot'), 'to throw',
+            [
+                'To use the `to satisfy snapshot` assertion with the shallow and full DOM renderers, require unexpected-react as `require(\'unexpected-react/jest\');`',
+                '',
+                ''
+            ].join('\n')
+        );
+    });
+
+    it('shows a helpful error message after shallow rendering when asserting using `to match snapshot`', function () {
+        expect(() => expect(<ClickCounter />, 'when rendered', 'to match snapshot'), 'to throw',
+            [
+                'expected <ClickCounter /> when rendered',
+                'To use the `to match snapshot` assertion with the shallow and full DOM renderers, require unexpected-react as `require(\'unexpected-react/jest\');`',
+                '',
+                ''
+            ].join('\n')
+        );
+    });
+
+    it('shows a helpful error message when asserting using `to satisfy snapshot`', function () {
+        expect(() => expect(<ClickCounter />, 'when rendered', 'to satisfy snapshot'), 'to throw',
+            [
+                'expected <ClickCounter /> when rendered',
+                'To use the `to satisfy snapshot` assertion with the shallow and full DOM renderers, require unexpected-react as `require(\'unexpected-react/jest\');`',
+                '',
+                ''
+            ].join('\n')
+        );
+    });
+
+});

src/tests/testRenderer/incorrect-require/test-renderer-instead-of-test-renderer-jest.spec.js

@@ -0,0 +1,40 @@
+import Unexpected from 'unexpected';
+
+import React, { PropTypes } from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import UnexpectedReactTest from '../../../test-renderer';
+
+import ClickCounter from '../../components/ClickCounter';
+
+const expect = Unexpected.clone()
+    .installPlugin(UnexpectedReactTest);
+
+expect.output.preferredWidth = 80;
+
+describe('test-renderer-instead-of-test-renderer-jest', function () {
+
+    it('shows a helpful error message when asserting using `to match snapshot`', function () {
+        const testRenderer = ReactTestRenderer.create(<ClickCounter />);
+        expect(() => expect(testRenderer, 'to match snapshot'), 'to throw',
+            'To use the `to match snapshot` assertion with the test renderer, require unexpected-react as `require(\'unexpected-react/test-renderer-jest\');`'
+        );
+    });
+
+    it('shows a helpful error message when asserting using `to satisfy snapshot`', function () {
+        const testRenderer = ReactTestRenderer.create(<ClickCounter />);
+        expect(() => expect(testRenderer, 'to satisfy snapshot'), 'to throw',
+            'To use the `to satisfy snapshot` assertion with the test renderer, require unexpected-react as `require(\'unexpected-react/test-renderer-jest\');`'
+        );
+    });
+
+    it('shows a helpful error message when asserting using `to match snapshot` and the JSON output', function () {
+        const testRenderer = ReactTestRenderer.create(<ClickCounter />);
+        expect(() => expect(testRenderer.toJSON(), 'to match snapshot'), 'to throw',
+            [
+                'To use the `to match snapshot` assertion with the test renderer, require unexpected-react as `require(\'unexpected-react/test-renderer-jest\');`',
+                '',
+                'Also, don\'t pass the JSON, pass the test renderer directly'
+            ].join('\n')
+        );
+    });
+});

src/tests/testRenderer/snapshot.spec.js

@@ -593,6 +593,18 @@ describe('snapshots', function () {
       fs.unlinkSync.restore();
     }
   });
+
+  it('shows an error message if the JSON is asserted on directly', function () {
+
+      const renderer = ReactTestRenderer.create(<ClickCounter />);
+      expect(() => expect(renderer.toJSON(), 'to match snapshot'), 'to throw',
+          [
+              'To assert snapshots, use the testRenderer directly, not the result of `.toJSON()`',
+              'e.g.',
+              '  const testRenderer = ReactTestRenderer.create(<MyComponent />);',
+              '  expect(testRenderer, \'to match snapshot\');'
+          ].join('\n'));
+  });
 });
 
 

src/unexpected-react.js

@@ -15,6 +15,39 @@ module.exports = {
         types.installInto(expect);
         shallowAssertions.installInto(expect);
         deepAssertions.installInto(expect);
+
+        expect.addAssertion('<ReactTestRenderer|ReactTestRendererOutput> to (match|satisfy) snapshot', function (expect) {
+
+            expect.errorMode = 'bubble';
+            expect.fail({
+                message: function (output) {
+                    return output.text('To use the ')
+                        .error('`to ')
+                        .error(this.flags.match ? 'match' : 'satisfy')
+                        .error(' snapshot`')
+                        .text(' assertion with the test renderer, require unexpected-react as `require(\'unexpected-react/test-rendered-jest\');`');
+                }
+            });
+        });
+
+        expect.addAssertion(
+            [
+                '<ReactElement|ReactShallowRenderer|RenderedReactElement|ReactShallowRendererPendingEvent|RenderedReactElementPendingEvent> to match snapshot',
+                '<ReactElement|ReactShallowRenderer|RenderedReactElement|ReactShallowRendererPendingEvent|RenderedReactElementPendingEvent> to satisfy snapshot'
+            ],
+            function (expect) {
+                expect.errorMode = 'bubble';
+                expect.fail({
+                    message: (output) => {
+                        return output.text('To use the `')
+                            .error(this.testDescription)
+                            .text('` assertion with the shallow and full DOM renderers, require unexpected-react as `require(\'unexpected-react/jest\');`');
+                    },
+                    diff: (output) => {
+                        return output;
+                    }
+                });
+        });
     },
 
     clearAll() {

wallaby-testrenderer.js

@@ -52,4 +52,4 @@ module.exports = function (wallaby) {
             })
         }
     };
-};
+};