React / DevOps Showcase (Part 2)

Continuing from the last blog post (to prevent excessively long blog posts), now I will get into building the back end of Laravel (the database and api), connecting it to some components in the front-end and then — if this blog post isn’t excessively long — doing some unit testing.

Laravel Backend

The last blog post I modified the routes file to essentially reroute all traffic to the app.blade.php as React handles everything. But react needs to get its data from someplace.

First, we need to configure our .env file and then build some models, migrations and controllers.

I already had an existing MySQL server running on my Mac for other projects I have tested with. So I opened up MySQL Workbench and created a new schema for this app, and gave it an app user of the same name.

Next we can use php artisan make:model <ModelName> -m to make both the model and migration. I made one for Grocery, for our example app I will load it with some sample data like a grocery list

We also need a controller, GroceryController that I made with php artisan make:controller Grocery and we can link to that in our /routes/api.php

I redesigned the react /resources/js/components/pages/Test.js to be Groceries.js and load the data from out API. Now we can at least see the items in the DB!

I think here is a good place for a commit. In the future, I can expand on this to do better CRUD functionality. But for now, I want to do some unit testing.

Unit Testing

As the sole developer at my current organization, I have not really had to do unit testing. I have just always manually tested each function before releasing the app public. However doing unit tests is a fantastic devops practice that I need to know, and that is exactly what this project is helping me accomplish, so let’s dive in!

We have two different types of unit tests, and I want practice with both. First we can unit test the React components (JS) and second we can unit test the API (PHP).

React Unit Testing

First I will start with the front-end. I found a good tutorial here that I am going follow in my journey into unit testing. It appears first that we need two packages, npm install jest enzyme. I created a new folder named /tests inside of /resources/. I also created two new components named List and Paragraph, like in the tutorial, so I have two components to test with. I don’t really have to change the paragraph test (besides the imports). I also modified my package.json to have a new script of "test": "jest". Jest will automatically find any files with the test.js suffix and execute them.

I also noticed I am using react 17.0.2 and there is not currently an enzyme adapter for this. So I npm install @wojtekmaj/enzyme-adapter-react-17 for the unofficial version.

For my first test, I realized I forgot an import (even though it displayed fine in browser):

So after adding that import to /components/List.js then my test passed!

I went ahead and pushed a commit here with the react tests with jest / enzyme!


No comments available.

Leave a Reply

Your email address will not be published. Required fields are marked *