Remove built-in React support

To be provided through a plugin instead.

docs/03-assertions.md

@@ -201,7 +201,7 @@ Assert that `value` is not the same as `expected`. This is based on [`Object.is(
 
 ### `.deepEqual(value, expected, message?)`
 
-Assert that `value` is deeply equal to `expected`. See [Concordance](https://github.com/concordancejs/concordance) for details. Works with [React elements and `react-test-renderer`](https://github.com/concordancejs/react).
+Assert that `value` is deeply equal to `expected`. See [Concordance](https://github.com/concordancejs/concordance) for details. In AVA 3 this works with [React elements and `react-test-renderer`](https://github.com/concordancejs/react).
 
 ### `.notDeepEqual(value, expected, message?)`
 

docs/04-snapshot-testing.md

@@ -2,7 +2,7 @@
 
 Translations: [Français](https://github.com/avajs/ava-docs/blob/master/fr_FR/docs/04-snapshot-testing.md)
 
-AVA supports snapshot testing, [as introduced by Jest](https://facebook.github.io/jest/docs/snapshot-testing.html), through its [Assertions](./03-assertions.md) interface. You can snapshot any value as well as React elements:
+AVA supports snapshot testing, [as introduced by Jest](https://facebook.github.io/jest/docs/snapshot-testing.html), through its [Assertions](./03-assertions.md) interface. You can snapshot any value. In AVA 3 you can also snapshot React elements:
 
 ```js
 // Your component

lib/concordance-options.js

@@ -3,14 +3,8 @@ const util = require('util'); // eslint-disable-line unicorn/import-style
 const ansiStyles = require('ansi-styles');
 const stripAnsi = require('strip-ansi');
 const cloneDeepWith = require('lodash/cloneDeepWith');
-const reactPlugin = require('@concordance/react');
 const chalk = require('./chalk').get();
 
-// Wrap Concordance's React plugin. Change the name to avoid collisions if in
-// the future users can register plugins themselves.
-const avaReactPlugin = {...reactPlugin, name: 'ava-plugin-react'};
-const plugins = [avaReactPlugin];
-
 const forceColor = new chalk.Instance({level: Math.max(chalk.level, 1)});
 
 const colorTheme = {
@@ -52,34 +46,6 @@ const colorTheme = {
 		keyBracket: {open: forceColor.grey('['), close: forceColor.grey(']')},
 		valueFallback: forceColor.grey('…')
 	},
-	react: {
-		functionType: forceColor.grey('\u235F'),
-		openTag: {
-			start: forceColor.grey('<'),
-			end: forceColor.grey('>'),
-			selfClose: forceColor.grey('/'),
-			selfCloseVoid: ' ' + forceColor.grey('/')
-		},
-		closeTag: {
-			open: forceColor.grey('</'),
-			close: forceColor.grey('>')
-		},
-		tagName: ansiStyles.magenta,
-		attribute: {
-			separator: '=',
-			value: {
-				openBracket: forceColor.grey('{'),
-				closeBracket: forceColor.grey('}'),
-				string: {
-					line: {open: forceColor.blue('"'), close: forceColor.blue('"'), escapeQuote: '"'}
-				}
-			}
-		},
-		child: {
-			openBracket: forceColor.grey('{'),
-			closeBracket: forceColor.grey('}')
-		}
-	},
 	regexp: {
 		source: {open: ansiStyles.blue.open + '/', close: '/' + ansiStyles.blue.close},
 		flags: ansiStyles.yellow
@@ -131,8 +97,7 @@ exports.default = {
 	get maxDepth() {
 		return Math.max(3, util.inspect.defaultOptions.depth);
 	},
-	plugins,
 	theme
 };
 
-exports.snapshotManager = {plugins, theme: plainTheme};
+exports.snapshotManager = {theme: plainTheme};

package.json

@@ -128,8 +128,6 @@
 		"get-stream": "^6.0.0",
 		"it-first": "^1.0.4",
 		"proxyquire": "^2.1.3",
-		"react": "^16.14.0",
-		"react-test-renderer": "^16.14.0",
 		"replace-string": "^3.1.0",
 		"sinon": "^9.2.2",
 		"source-map-fixtures": "^2.1.0",

test-tap/assert.js

@@ -4,12 +4,9 @@ require('../lib/worker/options').set({chalkOptions: {level: 0}});
 
 const path = require('path');
 const stripAnsi = require('strip-ansi');
-const React = require('react');
-const renderer = require('react-test-renderer');
 const {test} = require('tap');
 const assert = require('../lib/assert');
 const snapshotManager = require('../lib/snapshot-manager');
-const HelloMessage = require('./fixture/hello-message');
 
 let lastFailure = null;
 let lastPassed = false;
@@ -660,13 +657,6 @@ test('.deepEqual()', t => {
 		);
 	});
 
-	passes(t, () => {
-		assertions.deepEqual(
-			renderer.create(React.createElement(HelloMessage, {name: 'Sindre'})).toJSON(),
-			React.createElement('div', null, 'Hello ', React.createElement('mark', null, 'Sindre'))
-		);
-	});
-
 	// Regression test end here
 
 	passes(t, () => {
@@ -1648,7 +1638,7 @@ test('.notThrowsAsync() fails if passed a bad value', t => {
 
 test('.snapshot()', t => {
 	// Set to `true` to update the snapshot, then run:
-	// "$(npm bin)"/tap -R spec test/assert.js
+	// npx tap test-tap/assert.js
 	//
 	// Ignore errors and make sure not to run tests with the `-b` (bail) option.
 	const updating = false;
@@ -1658,19 +1648,25 @@ test('.snapshot()', t => {
 		file: path.join(projectDir, 'assert.js'),
 		projectDir,
 		fixedLocation: null,
+		recordNewSnapshots: updating,
 		updating
 	});
 	const setup = _title => {
 		return new class extends assertions.constructor {
 			constructor(title) {
 				super({
 					compareWithSnapshot: assertionOptions => {
-						return manager.compare({
+						const {record, ...result} = manager.compare({
 							belongsTo: assertionOptions.id || this.title,
 							expected: assertionOptions.expected,
 							index: assertionOptions.id ? 0 : this.snapshotInvocationCount++,
 							label: assertionOptions.id ? '' : assertionOptions.message || `Snapshot ${this.snapshotInvocationCount}`
 						});
+						if (record) {
+							record();
+						}
+
+						return result;
 					}
 				});
 				this.title = title;
@@ -1694,14 +1690,6 @@ test('.snapshot()', t => {
 		passes(t, () => {
 			assertions.snapshot({foo: 'bar'}, {id: 'fixed id'}, 'message not included in snapshot report');
 		});
-
-		passes(t, () => {
-			assertions.snapshot(React.createElement(HelloMessage, {name: 'Sindre'}));
-		});
-
-		passes(t, () => {
-			assertions.snapshot(renderer.create(React.createElement(HelloMessage, {name: 'Sindre'})).toJSON());
-		});
 	}
 
 	{
@@ -1743,47 +1731,6 @@ test('.snapshot()', t => {
 		}
 	}
 
-	{
-		const assertions = setup('rendered comparison');
-		if (updating) {
-			assertions.snapshot(renderer.create(React.createElement(HelloMessage, {name: 'Sindre'})).toJSON());
-		} else {
-			passes(t, () => {
-				assertions.snapshot(React.createElement('div', null, 'Hello ', React.createElement('mark', null, 'Sindre')));
-			});
-		}
-	}
-
-	{
-		const assertions = setup('rendered comparison');
-		if (updating) {
-			assertions.snapshot(renderer.create(React.createElement(HelloMessage, {name: 'Sindre'})).toJSON());
-		} else {
-			failsWith(t, () => {
-				assertions.snapshot(renderer.create(React.createElement(HelloMessage, {name: 'Vadim'})).toJSON());
-			}, {
-				assertion: 'snapshot',
-				message: 'Did not match snapshot',
-				values: [{label: 'Difference:', formatted: '  <div>\n    Hello \n    <mark>\n-     Vadim\n+     Sindre\n    </mark>\n  </div>'}]
-			});
-		}
-	}
-
-	{
-		const assertions = setup('element comparison');
-		if (updating) {
-			assertions.snapshot(React.createElement(HelloMessage, {name: 'Sindre'}));
-		} else {
-			failsWith(t, () => {
-				assertions.snapshot(React.createElement(HelloMessage, {name: 'Vadim'}));
-			}, {
-				assertion: 'snapshot',
-				message: 'Did not match snapshot',
-				values: [{label: 'Difference:', formatted: '  <HelloMessage⍟\n-   name="Vadim"\n+   name="Sindre"\n  />'}]
-			});
-		}
-	}
-
 	{
 		const assertions = setup('bad message');
 		failsWith(t, () => {

test-tap/fixture/assert.js.md

@@ -4,64 +4,30 @@ The actual snapshot is saved in `assert.js.snap`.
 
 Generated by [AVA](https://avajs.dev).
 
-## element comparison
-
-> Snapshot 1
-
-    <HelloMessage⍟
-      name="Sindre"
-    />
-
-## fails
+## passes
 
 > Snapshot 1
 
     {
       foo: 'bar',
     }
 
-## fixed id
+> Snapshot 2
 
     {
       foo: 'bar',
     }
 
-## passes
-
-> Snapshot 1
+## fixed id
 
     {
       foo: 'bar',
     }
 
-> Snapshot 2
+## fails
+
+> Snapshot 1
 
     {
       foo: 'bar',
     }
-
-> Snapshot 3
-
-    <HelloMessage⍟
-      name="Sindre"
-    />
-
-> Snapshot 4
-
-    <div>
-      Hello 
-      <mark>
-        Sindre
-      </mark>
-    </div>
-
-## rendered comparison
-
-> Snapshot 1
-
-    <div>
-      Hello 
-      <mark>
-        Sindre
-      </mark>
-    </div>