Testing React Magma

Unit Tests

The goal of unit tests is to test the individual parts of a component. Unit tests are easy to write and are cheap long term because they run in seconds and will quickly catch any issues as long as the tests are well written. Here, we want to verify that each prop or scenario is fully tested. We want to aim to have over 85% coverage for each component.

What to test

• Every prop: that the default truly behaves as the default, required props, what happens when optional props are used or missing
• Edge cases: think: 0 vs 1 vs many, true vs false, unexpected inputs, selected values, etc.
• Styling when relevant: for example, when testing the different variants of Buttons, the color is relevant and we definitely want to test that. In other scenarios, testing for font color or margin may not be important so we can skip it.
• Events and action handlers: for example, when a button is clicked, the click handler gets called
• Test Id
• Passes a11y standards

What NOT to test

This is a general rule, so there may be exceptions

• Multiple components together (including child components)
• Every single CSS properties (only the important/relevant ones)

Snapshots

A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. This is what we can use to ensure that styles remain the same, so we should use these often.

Manual Testing

• Before merging a pull request, it should have a list of testing steps in the description. It should outline the edge cases that should be considered, and those that the developer accounted for and manually tested themselves.
• After a pull request is merged, each change should be manually tested. Manual testing should be done by a QA, Designer, or any other developer. Manual testing should take place first in the documentation site, then storybook.

Documentation site:

• Confirm the change is appropriately documented
• Confirm all props are visible and well documented

CodeSandbox:

• Confirm there are no errors or warnings
• Test all CodeSandbox examples behave as expected
• Test every prop and all the use cases listed in the testing notes
• When it makes sense, try to play with that component in a more complex way, combining it with others or having multiple of the same in a page
• Test the hook functions (onClick/onChange/etc)

Storybook:

• Confirm there are no accessibility issues
• Play around with the controls and different combinations of them
• Check the responsiveness of the component
• Check different browsers using Browserstack