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.

Testing

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', () => {
    expect(app).toMatchSnapshot()
  });

  it('should have the text `Hello!!!`', () => {
    expect(app.text()).toBe('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": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  }
// 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": [
      "<rootDir>/setupTests.js"
    ]
  }
// 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
  App
    ✓ 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.

Linting

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": [
      "airbnb",
      "airbnb/hooks"
    ]
  }
// 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.

node_modules
dist
.parcel-cache
.idea

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'

Conclusion

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

Resources

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

Aaron Shivers