Read 27 ~ React Testing and Deployment

By Abdallah obaid

NAME	URL
Home	Home.
Prep	Prep: Engineering Topics.
Read 01	Node Ecosystem, TDD, CI/CD.
Read 02	Classes, Inheritance, Functional.
Read 03	Data Modeling & NoSQL Databases.
Read 04	Advanced Mongo/Mongoose.
Read 05	Linked Lists.
Read 06	HTTP and REST.
Read 07	Express.
Read 08	Express Routing & Connected API.
Read 09	API Server.
Read 10	Stacks and Queues.
Read 11	Authentication.
Read 12	OAuth.
Read 13	Bearer Authorization.
Read 14	Access Control (ACL).
Read 15	Trees.
Read 16	Event Driven Applications.
Read 17	TCP Servers.
Read 18	Socket.io.
Read 19	Message Queues.
Read 26	Component Based UI.
Read 27	React Testing and Deployment.

---

React Testing

---

## Snapshots :

• Its make a shot for the exact rendered tree dom and use it to be compared with later versions.

## Render Testing:

• Using react-test-renderer module
• Similar to snapshots, but allows for jQuery-like inspection of the virtual DOM tree.

## Shallow Testing :

• Allows us to test the parent component without testing their children.

## Mounting:

• Allows us to test the parent component and also testing their children.

---

React Deployment

---

React, remember is an index.html file that uses Javascript to render components in the browser. The node server is only there to aid in your development. npm run build output a static website containing no more than the index.html, .js and .css files required to open your app.

## Deploying to GitHub Pages:

1. Enable GitHub Pages on your domain, using the gh-pages branch
2. Create a Personal Access Token in your GitHub account
3. Add this token as a “Secret” called PERSONAL_TOKEN in the repository housing your react app
4. Add the react workflow .yml file to your repository (in .github/workflows)

## Deploying to AWS (s3):

1. Create a new Bucket
   • Storage containers for static assets
   • Essentially, these are “folders”
2. Objects
   • These are the things in the buckets (your files)
   • Upload the contents of your React application build folder to your bucket
3. Set up to serve websites
   • Properties Tab “Static Web Hosting” option

## Deploying to AWS Amplify:

1. Create a new Amplify Workflow
2. Point the workflow at your GitHub repository (master branch)
3. Merge your code to master on GitHub
4. That’s it … Amplify will monitor your repository for changes, pull, build, and deploy your React app automatically
5. Eventually, there’s a usage charge for the service, depending on your traffic level ## Deploying to Netlify:
6. Create a netlify.com account
7. Create a new application
8. Point the application at your GitHub repository (master branch)
9. Merge your code to master on GitHub
10. That’s it … Netlify will monitor your repository for changes, pull, build, and deploy your React app automatically

## Deploying to an “old school” host, such as godaddy.com:

1. Create your account
2. Open an FTP connection to your hosting company with a tool like Transmit or FileZilla
3. Navigate to the web root folder
4. Upload the contents of your react application’s build folder