adding react-testing-lib

Author: michielbouw

.eslintrc.json

@@ -8,7 +8,10 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "plugins": [
+    "@typescript-eslint",
+    "simple-import-sort"
+  ],
   "extends": [
     "prettier",
     "prettier/react",
@@ -40,4 +43,4 @@
     "browser": true,
     "es6": true
   }
-}
+}

README.md

@@ -1,6 +1,6 @@
-# React (v16.8.0-alpha.0), Typescript, Yarn & Lerna Monorepo
+# React (v16.8.0+), Typescript, Yarn & Lerna Monorepo
 
-Starting point for a Typescript, React (v16.8.0-alpha.0), Yarn & Lerna monorepo project with full setup for ESLint and Prettier.
+Starting point for a Typescript, React (v16.8.0+, *tested up to v16.13.1*), Yarn & Lerna monorepo project with full setup for ESLint and Prettier.
 
 ## Stack
 

package.json

@@ -21,6 +21,9 @@
     "clean": "lerna clean"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.7.0",
+    "@testing-library/react": "^10.0.4",
+    "@testing-library/user-event": "^10.1.1",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
@@ -43,4 +46,4 @@
       "packages/*"
     ]
   }
-}
+}

packages/shared/package.json

@@ -16,7 +16,6 @@
     "lint:fix": "eslint --fix . --ignore-path ../../.eslintignore --ext ts --ext tsx --ext js --ext jsx"
   },
   "peerDependencies": {
-    "@types/jest": ">=24.0.0",
     "@types/node": ">=13.0.0",
     "@types/react": ">=16.8.0",
     "@types/react-dom": ">=16.8.0",

packages/www/package.json

@@ -16,6 +16,9 @@
     "lint:fix": "eslint --fix . --ignore-path ../../.eslintignore --ext ts --ext tsx --ext js --ext jsx"
   },
   "peerDependencies": {
+    "@testing-library/jest-dom": "^5.7.0",
+    "@testing-library/react": "^10.0.4",
+    "@testing-library/user-event": "^10.1.1",
     "@types/jest": ">=24.0.0",
     "@types/node": ">=13.0.0",
     "@types/react": ">=16.8.0",

packages/www/src/App.test.tsx

@@ -1,10 +1,10 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/get more info on create react app/i);
+  expect(linkElement).toBeInTheDocument();
 });

packages/www/src/App.tsx

@@ -22,6 +22,14 @@ const App = () => {
           Starting point for a Typescript, React, Yarn & Lerna monorepo project
           with full setup for ESLint and Prettier.
         </p>
+        <a
+          className="App-link"
+          href="https://github.com/facebook/create-react-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Get more info on Create React App
+      </a>
       </header>
     </div>
   );

packages/www/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';