Contributing on React

Frontend Testing

We use enzyme and jest are used for frontend testing. All test files should be put under a folder named __test__ for that component / container / page / folder, which will be excluded by webpack from the main bundler.

Unit tests

• To do unit tests on components, we use Enzyme's shallow rendering to render the component, then use jest's expect together with the snapshot feature to assert the component's state given different inputs/props.

Integration tests

• When writing integration tests, ensure that all components including redux (actions, reducers, etc) and react-router are tested. Note that there is no server when running the front-end tests, hence all server API calls to get data should be mocked. To test if the components make the correct API call, use jest's spy function to ensure that the API is called with the correct parameters.

• Enzyme's mount rendering should be used in integration tests. Where possible, avoid snapshots of the mount rendered components. This is because the output of mount is large, unreadable, and results in tests becoming implicit as they are only assertions of the snapshots.

Assets

Webpack is used to manage assets (rather than the Rails default asset pipeline). With webpack and some helpers, you are able to specify javascript that will be loaded on specific pages. When including javascript files in specific pages, use the following convention:

• To include javascript in Course::LessonPlanController, add in client/app/bundlers/course/lesson_plan.js

Key Issues when Defining Components

Components

• See if there are any other components already defined (in client/app/lib/components), and use those if possible.
• Define validation functions outside of render functions. This prevents a new function being created each time the component is rendered.