Increase Code Coverage to 65% + for initial React App

[RyanMarten]

Add jest tests that hit render code for the HTML. Also hits the button code on Login and Register.

Readings:

• Create React App: https://create-react-app.dev/docs/running-tests/
• Jest Test React: https://jestjs.io/docs/en/tutorial-react
• React Test Renderer: https://www.valentinog.com/blog/testing-react/

[RyanMarten]

npm test

> app@0.1.0 test /Users/ryanmarten/Classes/CSC491/dream-team/app
> react-scripts test

TypeError: fsevents is not a function
    at new FSEventsWatcher (/Users/ryanmarten/Classes/CSC491/dream-team/app/node_modules/jest-haste-map/build/lib/FSEventsWatcher.js:162:20)
    at createWatcher (/Users/ryanmarten/Classes/CSC491/dream-team/app/node_modules/jest-haste-map/build/index.js:1052:23)
    at Array.map (<anonymous>)
    at HasteMap._watch (/Users/ryanmarten/Classes/CSC491/dream-team/app/node_modules/jest-haste-map/build/index.js:1230:44)
    at /Users/ryanmarten/Classes/CSC491/dream-team/app/node_modules/jest-haste-map/build/index.js:517:21
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/ryanmarten/Classes/CSC491/dream-team/app/node_modules/jest-haste-map/build/index.js:193:24)
    at _next (/Users/ryanmarten/Classes/CSC491/dream-team/app/node_modules/jest-haste-map/build/index.js:213:9)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
npm ERR! Test failed.  See above for more details.

This is why I want to switch to yarn to fix #163. I'm going to try to use it here and see if it fixes this error

[RyanMarten]

That wasn't the fix. So I'm going back to npm for now.

I did however, find the fix. https://github.com/bbc/simorgh/wiki/Known-setup-issue-when-running-%60npm-test%60

To build our application we are using Razzle; Razzle's unit testing framework is Jest; Jest has a dependency on "watchman" which isn't a node package.

Now that xcode is up-to-date it should be a simple case of installing watchman:

brew install watchman

I'm going to add this to the boostrap.sh if it works too

[RyanMarten]

For future testing with mocked values, jest has a built in library for that: https://jestjs.io/docs/en/mock-functions.html. -- Mock out the client or method making the requesy

Also nock: https://github.com/nock/nock --- Mock out the actual HTTP request

More info: https://dcsil-team-app.herokuapp.com/docs/software/testing/web_requests

Configuring mocking the test environment: https://create-react-app.dev/docs/running-tests/#initializing-test-environment

[RyanMarten]

Testing components: https://create-react-app.dev/docs/running-tests/#testing-components

There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes.

Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating basic smoke tests for your components:

[RyanMarten]

Can also set up debugging: https://create-react-app.dev/docs/debugging-tests

Works in Chrome and in Visual Studio Code

[RyanMarten]

Reduce code duplication using shared tests: https://blog.revathskumar.com/2018/07/jest-shared-tests.html