React-App-with-jest-testing.md

Creating a React App

1. In the terminal run npx create-react-app NAMEOFYOURAPP
2. Cd into the new directory: cd NAMEOFYOURAPP
3. Run npm install.
4. You can run npm start to see if the app was set up correctly.

Setting Up Testing

1. Install enzyme: npm i enzyme -D
2. Install enzyme-adapter-react-16: npm install enzyme-adapter-react-16 -D
3. Inside of /src create setupTests.js: touch src/setupTests.js
4. Put the following 3 lines of code in setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

5. For snapshot testing, install enzyme-to-json npm install enzyme-to-json -D
6. In package.json, add the following lines of code:

  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }

Don't forget the comma!

7. Add an extra line in App.js (just so there's a change in the file) and save. Then run npm test to check that the files are connected correctly.
8. Include the following lines as headers for all test files:

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