diff --git a/packages/cra-template/template/src/App.test.js b/packages/cra-template/template/src/App.test.js
index a754b201bf9..8c4a177b341 100644
--- a/packages/cra-template/template/src/App.test.js
+++ b/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(, div);
- ReactDOM.unmountComponentAtNode(div);
+test('renders welcome heading', () => {
+ const { getByRole } = render();
+ const headingElement = getByRole('heading');
+ expect(headingElement).toHaveTextContent(/welcome/i);
});
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index fb3490617c4..76894d7e845 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/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();
diff --git a/test/fixtures/node_path/src/setupTests.js b/test/fixtures/node_path/src/setupTests.js
new file mode 100644
index 00000000000..2eb59b05d85
--- /dev/null
+++ b/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'