I am new to React and recently I found out there is the tool called storybook which basically helps to test our React components in isolated manner. However, I also found out that storybook is used when we test our React application, that is, there happens the comparison of snapshots. The question is what is the reason for testing the difference of snapshots? I mean, is it like we create a certain component and create a snapshot for it to ensure that other developers do not change that component accidentally, that is, snapshot in storybook helps us ensure there is no accidental change of components that we created. Is it true?
You create snapshot tests to ensure that your Components renders correctly given a certain input.
This is a way to make sure your code still behaves the way it was intended to. It's to ensure you don't accidentally break something in your code base, but also to alert you when anything changes.
An example:
Say I have a component called ProfileLink that generates a link to a user account:
function ProfileLink(props) {
return <a href ={get_url(user.id)}>{props.user.profileName}</a>;
}
and somewhere else I have a function called get_url:
function get_url(id) {
return "www.example.com/user/" + id;
}
Now, to ensure that my ProfileLink is always working, I can create snapshot, and everytime my tests run, the snapshot will be compared to the current rendered component.
Say someone were to change the get_url function, they might not be aware that it's used in ProfileLink, but as soon as the tests are run, you'll know that something has changed in the ProfileLink component as well.