Add unit testing framework to front-end

[joewalling]

Get Jest and Enzyme setup and create unit and integration tests for the front-end.

There will be 3 different levels of testing in ReactAdvantage.

• Unit Tests- Testing of individual functions or classes by supplying input and making sure the output is as expected. In ReactAdvantage, this will be done on both the server side and the client side.
• Integration Tests- Testing processes or components to behave as expected, including the side effects.
• UI Tests- (A.K.A Functional Tests) Testing scenarios on the product itself, by controlling the browser or the website, regardless of the internal structure to ensure expected behavior. We’ll use TestCafe for UI Testing. https://devexpress.github.io/testcafe/. The UI tests will be done under another issue.

Unit and integration testing of the client application will be with Enzyme and Jest. Enzyme is a testing library to render the react component into the DOM and query the DOM tree. Jest is a unit testing framework and has a test runner, assertion library, and mocking support.

While most guidance for Jest testing suggests putting tests in a folder called tests, I prefer the unit and integration tests be in the same folder as the code being tested. The files would end in “.test.js”. For example, if there is a “button.js” file, the tests for this button would be in a file named “button.test.js”

UI tests can be in a separate /tests folder.

Here are a few articles that might be useful: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests

This workshop has some good examples - https://github.com/kentcdodds/react-jest-workshop