add @testing-library support to the default template

Closes #6358

packages/cra-template/template/src/App.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+test('renders welcome heading', () => {
+  const { getByRole } = render(<App />);
+  const headingElement = getByRole('heading');
+  expect(headingElement).toHaveTextContent(/welcome/i);
 });

packages/react-scripts/scripts/init.js

@@ -219,6 +219,12 @@ module.exports = function(
     args = args.concat(['react', 'react-dom']);
   }
 
+  args.push(
+    '@testing-library/react',
+    '@testing-library/jest-dom',
+    '@testing-library/user-event'
+  );
+
   // Install template dependencies, and react and react-dom if missing.
   if ((!isReactInstalled(appPackage) || templateName) && args.length > 1) {
     console.log();

test/fixtures/node_path/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'