Add c-r-a to test scope. Refactor to apply classnaming

Author: Andrii Kirmas

__recipes__/create-react-app/package.json

@@ -17,9 +17,11 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "prebuild": "npm run setup && npm run test -- --watchAll=false",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "setup": "npm uninstall react-classnaming --no-audit --progress=false --quiet --silent && npm install ../.. --no-audit --progress=false --quiet --silent"
   },
   "eslintConfig": {
     "extends": [

__recipes__/create-react-app/src/App.test.tsx

@@ -3,5 +3,5 @@ import App from './App';
 import renderer from 'react-test-renderer';
 
 test('snapshot', () => {
-  expect(renderer.create(<App />).toJSON()).toMatchSnapshot()
+  expect(renderer.create(<App className="App"/>).toJSON()).toMatchSnapshot()
 });

__recipes__/create-react-app/src/App.tsx

@@ -1,26 +1,37 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import logo from './logo.svg';
-import './App.css';
 
-function App() {
+function App({className}: {className: string}) {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+    <div className={className}>
+      <Header className="App-header">
+        <Logo className="App-logo"/>
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <Link className="App-link"/>
+      </Header>
     </div>
   );
 }
 
 export default App;
+
+function Header({className, children}: PropsWithChildren<{className: string}>) {
+  return <header className={className}>{children}</header> 
+}
+
+function Logo({className}: {className: string}) {
+  return <img src={logo} className={className} alt="logo" />
+}
+
+function Link({className}: {className: string}) {
+  return <a
+    className={className}
+    href="https://reactjs.org"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Learn React
+  </a>    
+}

__recipes__/create-react-app/src/index.tsx

@@ -3,10 +3,11 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './App.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App className="App"/>
   </React.StrictMode>,
   document.getElementById('root')
 );

__recipes__/package-lock.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "test": "cd cra && npm run test"
+    "test": "npm run cra && npm run create-react-app",
+    "cra": "cd cra && npm run build",
+    "create-react-app": "cd create-react-app && npm run build"
   },
   "keywords": [],
   "author": "",