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'