Building a Health Insurance Calculator — Part 2 Environment Set Up

I want to build an application to make employees benefits choices easy. I want to help people concentrate on what matters while protecting themselves.This is a series of stories about my progress with the application, the benefits or challenges I find using TDD, and what I have learned about React Native. In Part 1, I talked about the problem I am trying to solve and the plan to fix it.

Photo by Christopher Gower on Unsplash

This story is going to be heavy on software development because I need to set up my laptop to work on the project. I expect in the future posts, more time will be spent on the application itself and the features I am adding for employees. In this part, I am going to cover topics about setting up the development environment including:

• Installing React Native
• Setting up Linter
• Creating Testing Framework

Installing React Native

React Native is a framework built on JavaScript. In order to get dependencies needed to write the application, I will use npm as the package manager. Assuming you have Node 12 installed, npm can be used to install the first package needed for the development environment. I initialized the project using Expo. In Expo’s own words:

“With Expo tools, services, and React, you can build, deploy, and quickly iterate on native Android, iOS, and web apps from the same JavaScript codebase.”

To install the CLI, run:

npm install -g expo-cli

This will install the Expo CLI as a global package so it can be used outside of a specific node project. Then to create the project, I used the expo command:

expo init hice

Hice is the name of the package I created. It is a acronym for Health Insurance Cost Estimator. Expo creates a folder in the current working directory which is set up to run a React Native application on web, Android, and iOS. When running the init command, I chose the blank template.

Now you have a working React Native application. To see what Expo has created, from the hice directory, I entered npm run ios, which started the XCode emulator and a tab in browser. Once the bundler running the browser tab finished, I could see the new React Native application on the emulator.

Setting up Linter

I like using some sort of static analysis on my code. It is called static analysis because the tool checks the code without running it. Linters analyze the code for common programming mistakes and pitfalls. Some common examples are unused variables, nonstandard indentation, or dead code. For JavaScript, ESLint is a common linter. It is supported by organizations such as airbnb and Shopify. To install it, I first ran:

npm install --save-dev eslint 

This installs the package and saves it in the devDependencies section of the package.json. I chose this option since the package is only needed during development. With ESLint downloaded, it now needs to be set up for the package. In order to do this, a script is created for npm. These npm scripts can be used to run commands using the dependencies installed to the package. The "scripts" section of package.json was edited to add the lint command:

"scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "web": "expo start --web",
  "eject": "expo eject",
  "lint": "eslint --init"
},

Executing npm run lint will initialize the package after asking a series of configuration questions:

1. Q: How would you like to use ESLint? A: To check syntax, find problems, and enforce code style
2. Q: What type of modules does your project use? A: JavaScript modules (import/export)
3. Q: Which framework does your project use? A: React
4. Q: Does your project use TypeScript? A: N
5. Q: Where does your code run? A: Both Browser and Node
6. Q: How would you like to define a style for your project? A: Use a popular style guide
7. Q: Which style guide do you want to follow? A: Airbnb: https://github.com/airbnb/javascript
8. Q: What format do you want your config file to be in? A: JavaScript
9. Q: The style guide “airbnb” requires eslint@⁵.16.0 || ^6.8.0. You are currently using eslint@7.1.0. Do you want to downgrade? A: Y
10. Q: Would you like to install them now with npm? A: Y

All the necessary dependencies, configuration files, and setup will then be created by ESLint. Then we can edit the lint npm script to change it from eslint --init to eslint App.js --fix and run the lint command again. The --fix flag will try to automatically fix any issues it finds. However, when run for the first time there is two issues which need to be fixed.

/Users/thenerdassassin/Documents/tutorials/temp/App.js
6:5   error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension
6:18  error  'styles' was used before it was defined        no-use-before-define
✖ 2 problems (2 errors, 0 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ lint: `eslint App.js --fix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ lint script.

To fix the first error, simply rename App.js to App.jsx and update the lint script again to point to the new file. For the other error, simply move the styles declaration to the top of the file.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

Then when npm run lint is executed everything finishes successfully. The other change I made to the package.json file was to make sure all the build scripts run lint before building. This way the developer is forced to develop using best practices. This was especially important for me since I am new to React Native.

"scripts": {
  "start": "npm run lint && expo start",
  "android": "npm run lint && expo start --android",
  "ios": "npm run lint && expo start --ios",
  "web": "npm run lint && expo start --web",
  "eject": "npm run lint && expo eject",
  "lint": "eslint App.jsx --fix"
},

Creating Testing Framework

Now I needed to set up a testing environment. It is hard to work with Test Driven Development (TDD) with out one. 🤣 The test framework I am using is Jest.

“It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!”

Jest aims to work out of the box with zero configuration. It runs in parallel out of the box, comes with code coverage, and easy mocking. However, to be honest, getting Jest configured and installed was the most frustrating part of this experience for me. After struggling for a while, I found a good tutorial to help me. To install it run:

npm install --save-dev jest-expo

Again, this is a dependency needed when developing but will not need to be built into the running application so we make sure to add the --save-dev flag. The only configuration I needed to do was to edit the package.json to add two lines.

• A new script: "test": "jest",
• A small jest configuration section:

"jest": {
  "preset": "jest-expo"
},

I then wrote a pretty dumb unit test in order to make sure the testing framework was installed correctly. First create a file test/smoke.test.js and add the test:

describe('truth', () => {
  it('is true', () => {
    expect(true).toEqual(true);
  });
});

The test script is a special npm script which can be run with a shorter command. To run the new test, simply execute npm test, the run portion of the command is not needed. The npm documentation has a list of these special commands. After running the command the following output will verify set up is correct:

> jest
PASS  test/smoke.test.js
truth
✓ is true (2ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.193s
Ran all test suites.

Conclusion

Using some of the dev set up CLI and tooling getting the project in a state of work is not too difficult. I had to stitch together a few tutorials in order to get this working. I hope this environment set up will quicken the process for the next person starting a React Native application.

Some of the tools used:

• expo-cli
• npm
• jest
• eslint

In the next portion, I plan on building out the annual premium calculator. I would like to give the user the option to put on the premium cost and be able to enter whether the premium is charged annually, biweekly, or weekly. The calculator should then tell the user what the premium will be for the entire year. I feel this is the first step to figure out the cost of the health insurance. Our first building block.

To continue the conversation or ask me any questions, find @thenerdassassin on Twitter or LinkedIn.

References

• ReactNative.dev
• ReactJS.org
• ReactNativeTesting.org
• NPM Cli Doc
• Jest
• Jest Cheat Sheet