Day 2: React File Organization and Understanding Syntax for Chai with Enzyme

Second day of my every-other-day-React-project-progress-posting (I need a better name… suggestions, anyone?), with the Day One posting here for those curious: Day One: Create-React-App with Mocha and Enzyme – with No NPM Eject!

Task One: File Organization

So, I was creating the directory organization for NextBus Compare. Looking at my previous sketches of possible file structure for my project:

file structure sketch
An old sketch from about a month ago

plus being so new to Redux, I am going to stick with the tradition method of organizing it by function/nature. For those who want to read about React file organization, there are 2 articles that I found useful:

They each called the typical organization method different name – function or nature centric. François also advocated for what he called a domain-centric approach, while Mikey went with a feature-centric approach. I have personally done domain-centric before, and did like it quite a bit. For this one though, I am going to play it safe because my focus is to learn Redux here.

So here is my current file structure:

Nextbus Compare File Structure
Nextbus Compare File Structure

Task Two: Writing Test Files

Once there are new files, I tried to write test files to make sure all the files are loading, even though they only load empty div at this point.

Then I slowly realize that every googled posting for Mocha/Chai/Enzyme seemed to have different but very similar syntax. Therefore, I have a lot of tabs open but is very confused.

*Sighs*

Eventually, I just close every tab, and search for the documentation for Chai and Enzyme. Restricting my reference source made it easier. Here is one of my test file:

Nextbus Compare Test File
The App.spec.js test file in my Nextbus Compare app

Save