React Starter Template - Part 2

React Starter Template - Part 2

This is part two where we'll be adding testing and linting to our React Starter Template. Here's React Starter Template - Part 1 where we setup React with Parcel.


Install Jest

yarn add -D jest

Install Enzyme

yarn add -D enzyme enzyme-adapter-react-16

Create a test file for App.jsx

touch src/App.test.jsx

Add some tests to App.test.jsx

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

describe('App', () => {
  const app = shallow(<App/>)

  it('should render correctly', () => {

  it('should have the text `Hello!!!`', () => {

Install babel

yarn add -D @babel/preset-react

Add these babel presets to package.json, so we can run the tests from the command line.

// other configurations
  "babel": {
    "presets": [
// other configurations

Create a configuration file for Enzyme

touch setupTests.js

Add the configurations to setupTests.js

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Add the Jest configuration to package.json

// other configurations
  "jest": {
    "setupFilesAfterEnv": [
// other configurations

Add a test script to package.json

// other configurations
  "scripts": {
    "start": "parcel src/index.html",
    "test": "jest src/"
// other configurations

Run the tests

yarn test

You should see the results with two passing tests.

yarn run v1.22.5
$ jest src/
 PASS  src/App.test.jsx
    ✓ should render correctly (3 ms)
    ✓ should have the text "Hello!!!"

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   1 passed, 1 total
Time:        1.768 s, estimated 2 s
Ran all test suites matching /src\//i.
Done in 2.51s.


Install Eslint with Airbnb Style guide

npx install-peerdeps --dev eslint-config-airbnb

Select y to install with yarn

Add the eslint configuration to package.json

  // other configurations
  "eslintConfig": {
    "env": {
      "browser": true,
      "jest": true
    "extends": [
// other configurations

Add a lint script to package.json

// other configurations
  "scripts": {
    "start": "parcel src/index.html",
    "test": "jest src/",
    "lint": "eslint \"src/**/*.{js,jsx}\""
// other configurations

Run the linter with the auto fix option

yarn lint --fix

You should see the results.

yarn run v1.22.5
$ eslint src/**/*.{js,jsx} --fix
Done in 2.36s.

Bonus - Git Hooks

Follow this guide to set up a pre-commit hook.

Commit Your Work

Create a .gitignore file

touch .gitignore

Add any files or directories that you want Git to ignore to .gitignore.


Check Git Status

git status

Confirm that you are okay with committing all untracked files.

Stage all untracked files

git add .

Make a commit

git commit -m 'first commit'


You now have a fully functioning React application with a testing environment, linting, and version control.


React, Parcel, Jest, Babel, Yarn, ESLint, AirBnb Style Guide, and Enzyme.