Snapshot testing sounds exactly like what it does! It takes snapshot of the structure of a rendered component the props, and their values and saves it. Whenever a change is made it'll compare it to the original snapshot - just to be super sure the change you wanted to make had the desired outcome. If the outcomes is what you expected, then you need to update the snapshot, so that your changes will be the new standard to compare to for changes in the future.
To update the snapshots run this command:
yarn test -u
npm run test -u
For Snapshot Testing, we use Jest.
You can read more about snapshot testing here.
Functional tests ensures that a component functions the way it should(simplified). This is important for making changes to components, as it makes sure we don't break how something worked previously.
If a user touches on a button in the button group, then the button selected should be highlighted
and the previous one un-highlighted.
For Functional Testing, we use Enzyme.
You can read more about functional testing here.