From 033a41c41ca584f69970aecaf4db3c3abed147d1 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Fri, 25 Oct 2019 00:05:01 -0700 Subject: [PATCH 1/9] add @testing-library support to the default template Closes #6358 --- packages/cra-template/template/src/App.test.js | 10 +++++----- packages/react-scripts/scripts/init.js | 6 ++++++ test/fixtures/node_path/src/setupTests.js | 5 +++++ 3 files changed, 16 insertions(+), 5 deletions(-) create mode 100644 test/fixtures/node_path/src/setupTests.js 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' From 45e46f4b87623f32902c8c59bd6ddd5acc389d1a Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 28 Oct 2019 14:22:22 -0600 Subject: [PATCH 2/9] use template.json --- packages/cra-template-typescript/template.json | 3 +++ packages/cra-template/template.json | 6 +++++- packages/react-scripts/scripts/init.js | 6 ------ 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json index 86eabeff971..9b3c8540d9b 100644 --- a/packages/cra-template-typescript/template.json +++ b/packages/cra-template-typescript/template.json @@ -1,5 +1,8 @@ { "dependencies": { + "@testing-library/react": "^9.3.0", + "@testing-library/jest-dom": "^4.2.0", + "@testing-library/user-event": "^7.1.2", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json index 92a4250788e..6c3d03d1b0d 100644 --- a/packages/cra-template/template.json +++ b/packages/cra-template/template.json @@ -1,3 +1,7 @@ { - "dependencies": {} + "dependencies": { + "@testing-library/react": "^9.3.0", + "@testing-library/jest-dom": "^4.2.0", + "@testing-library/user-event": "^7.1.2" + } } diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 76894d7e845..fb3490617c4 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -219,12 +219,6 @@ 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(); From 72fda031610c664a40503eac0ef49ff64c7df024 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 28 Oct 2019 14:24:15 -0600 Subject: [PATCH 3/9] fix setupTests in templates --- .../cra-template-typescript/template/src/App.test.tsx | 10 +++++----- .../cra-template-typescript/template/src/setupTests.ts | 5 +++++ .../cra-template/template}/src/setupTests.js | 2 +- 3 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 packages/cra-template-typescript/template/src/setupTests.ts rename {test/fixtures/node_path => packages/cra-template/template}/src/setupTests.js (80%) diff --git a/packages/cra-template-typescript/template/src/App.test.tsx b/packages/cra-template-typescript/template/src/App.test.tsx index a754b201bf9..8c4a177b341 100644 --- a/packages/cra-template-typescript/template/src/App.test.tsx +++ b/packages/cra-template-typescript/template/src/App.test.tsx @@ -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/cra-template-typescript/template/src/setupTests.ts b/packages/cra-template-typescript/template/src/setupTests.ts new file mode 100644 index 00000000000..74b1a275a0e --- /dev/null +++ b/packages/cra-template-typescript/template/src/setupTests.ts @@ -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'; diff --git a/test/fixtures/node_path/src/setupTests.js b/packages/cra-template/template/src/setupTests.js similarity index 80% rename from test/fixtures/node_path/src/setupTests.js rename to packages/cra-template/template/src/setupTests.js index 2eb59b05d85..74b1a275a0e 100644 --- a/test/fixtures/node_path/src/setupTests.js +++ b/packages/cra-template/template/src/setupTests.js @@ -2,4 +2,4 @@ // 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' +import '@testing-library/jest-dom/extend-expect'; From dfcfc9547cc5847590b5779fa1d236eaa0f72eca Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Mon, 28 Oct 2019 20:35:51 -0700 Subject: [PATCH 4/9] Fix e2e-installs dependency checks --- tasks/e2e-installs.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index f083f2dd09b..79988df9e29 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -51,7 +51,7 @@ function exists { # Check for accidental dependencies in package.json function checkDependencies { if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \ - grep -v -q -E '^\s*"react(-dom|-scripts)?"'; then + grep -v -q -E '^\s*"(@testing-library\/.+)|(react(-dom|-scripts)?)"'; then echo "Dependencies are correct" else echo "There are extraneous dependencies in package.json" @@ -62,7 +62,7 @@ function checkDependencies { # Check for accidental dependencies in package.json function checkTypeScriptDependencies { if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \ - grep -v -q -E '^\s*"(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then + grep -v -q -E '^\s*"(@testing-library\/.+)|(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then echo "Dependencies are correct" else echo "There are extraneous dependencies in package.json" From 06b2617a70a7b9b2ef6344d19f6e1bbe00e89b5d Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Mon, 28 Oct 2019 21:29:53 -0700 Subject: [PATCH 5/9] Fix template tests --- package.json | 3 +++ packages/cra-template-typescript/template/src/App.test.tsx | 4 ++-- packages/cra-template/template/src/App.test.js | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index cc6fe4bb61d..c67293fa9d7 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,9 @@ "compile:lockfile": "node tasks/compile-lockfile.js" }, "devDependencies": { + "@testing-library/react": "^9.3.0", + "@testing-library/jest-dom": "^4.2.0", + "@testing-library/user-event": "^7.1.2", "alex": "^8.0.0", "eslint": "^6.1.0", "execa": "1.0.0", diff --git a/packages/cra-template-typescript/template/src/App.test.tsx b/packages/cra-template-typescript/template/src/App.test.tsx index 8c4a177b341..16ca54a55f1 100644 --- a/packages/cra-template-typescript/template/src/App.test.tsx +++ b/packages/cra-template-typescript/template/src/App.test.tsx @@ -4,6 +4,6 @@ import App from './App'; test('renders welcome heading', () => { const { getByRole } = render(); - const headingElement = getByRole('heading'); - expect(headingElement).toHaveTextContent(/welcome/i); + const linkElement = getByRole('link'); + expect(linkElement).toHaveTextContent(/learn react/i); }); diff --git a/packages/cra-template/template/src/App.test.js b/packages/cra-template/template/src/App.test.js index 8c4a177b341..16ca54a55f1 100644 --- a/packages/cra-template/template/src/App.test.js +++ b/packages/cra-template/template/src/App.test.js @@ -4,6 +4,6 @@ import App from './App'; test('renders welcome heading', () => { const { getByRole } = render(); - const headingElement = getByRole('heading'); - expect(headingElement).toHaveTextContent(/welcome/i); + const linkElement = getByRole('link'); + expect(linkElement).toHaveTextContent(/learn react/i); }); From 5974d5704b4f2d3ad15402f62475fd87535d4f8d Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 29 Oct 2019 10:15:36 -0600 Subject: [PATCH 6/9] Update App.test.tsx --- packages/cra-template-typescript/template/src/App.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cra-template-typescript/template/src/App.test.tsx b/packages/cra-template-typescript/template/src/App.test.tsx index 16ca54a55f1..8c4a177b341 100644 --- a/packages/cra-template-typescript/template/src/App.test.tsx +++ b/packages/cra-template-typescript/template/src/App.test.tsx @@ -4,6 +4,6 @@ import App from './App'; test('renders welcome heading', () => { const { getByRole } = render(); - const linkElement = getByRole('link'); - expect(linkElement).toHaveTextContent(/learn react/i); + const headingElement = getByRole('heading'); + expect(headingElement).toHaveTextContent(/welcome/i); }); From 1e4aa4d79acd61d087c4898ffd27b7497ed758d0 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 29 Oct 2019 10:15:50 -0600 Subject: [PATCH 7/9] Update App.test.js --- packages/cra-template/template/src/App.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cra-template/template/src/App.test.js b/packages/cra-template/template/src/App.test.js index 16ca54a55f1..8c4a177b341 100644 --- a/packages/cra-template/template/src/App.test.js +++ b/packages/cra-template/template/src/App.test.js @@ -4,6 +4,6 @@ import App from './App'; test('renders welcome heading', () => { const { getByRole } = render(); - const linkElement = getByRole('link'); - expect(linkElement).toHaveTextContent(/learn react/i); + const headingElement = getByRole('heading'); + expect(headingElement).toHaveTextContent(/welcome/i); }); From 80046de725ee5a270d7c8a860ac1e0545ea85bc9 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 29 Oct 2019 11:12:54 -0600 Subject: [PATCH 8/9] Update App.test.js --- packages/cra-template/template/src/App.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/cra-template/template/src/App.test.js b/packages/cra-template/template/src/App.test.js index 8c4a177b341..4db7ebc25c2 100644 --- a/packages/cra-template/template/src/App.test.js +++ b/packages/cra-template/template/src/App.test.js @@ -2,8 +2,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import App from './App'; -test('renders welcome heading', () => { - const { getByRole } = render(); - const headingElement = getByRole('heading'); - expect(headingElement).toHaveTextContent(/welcome/i); +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); }); From 83afd9efd34804cc4a1d78eacac60348f27c4fdb Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 29 Oct 2019 11:13:13 -0600 Subject: [PATCH 9/9] Update App.test.tsx --- packages/cra-template-typescript/template/src/App.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/cra-template-typescript/template/src/App.test.tsx b/packages/cra-template-typescript/template/src/App.test.tsx index 8c4a177b341..db597df0fdc 100644 --- a/packages/cra-template-typescript/template/src/App.test.tsx +++ b/packages/cra-template-typescript/template/src/App.test.tsx @@ -3,7 +3,7 @@ import { render } from '@testing-library/react'; import App from './App'; test('renders welcome heading', () => { - const { getByRole } = render(); - const headingElement = getByRole('heading'); - expect(headingElement).toHaveTextContent(/welcome/i); + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); });