Update 3.3.1 Templates

Author: devloco

packages/cra-template-wptheme-typescript/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cra-template-wptheme-typescript",
-    "version": "3.3.0-wp.8",
+    "version": "3.3.1-wp.1",
     "keywords": [
         "react",
         "create-react-app",

packages/cra-template-wptheme-typescript/template.json

@@ -1,8 +1,14 @@
 {
+  "package": {
     "dependencies": {
-        "@types/node": "^12.0.0",
-        "@types/react": "^16.9.0",
-        "@types/react-dom": "^16.9.0",
-        "typescript": "~3.7.2"
+      "@testing-library/react": "^9.3.2",
+      "@testing-library/jest-dom": "^4.2.4",
+      "@testing-library/user-event": "^7.1.2",
+      "@types/node": "^12.0.0",
+      "@types/react": "^16.9.0",
+      "@types/react-dom": "^16.9.0",
+      "@types/jest": "^24.0.0",
+      "typescript": "~3.7.2"
     }
+  }
 }

packages/cra-template-wptheme-typescript/template/public/favicon.ico

@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

packages/cra-template-wptheme-typescript/template/public/index.html

@@ -1,2 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
+Disallow:

packages/cra-template-wptheme-typescript/template/public/logo192.png

@@ -4,6 +4,13 @@
 
 .App-logo {
   height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-header {
@@ -18,5 +25,14 @@
 }
 
 .App-link {
-  color: #09d3ac;
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

packages/cra-template-wptheme-typescript/template/public/logo512.png

@@ -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 learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
 });

packages/cra-template-wptheme-typescript/template/public/robots.txt

@@ -2,7 +2,7 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-const App: React.FC = () => {
+const App = () => {
   return (
     <div className="App">
       <header className="App-header">
@@ -21,6 +21,6 @@ const App: React.FC = () => {
       </header>
     </div>
   );
-};
+}
 
 export default App;