Facebook introduced snapshot testing in Jest last year and it has already picked up a huge interest. Why is snapshot testing so popular? How and when should you use it? Can you use it even if you’re not using Jest? Anna will explain all this and more in only 10 minutes

1. Snapshot Testing
Anna Doubkova, @lithinn
1 / 23

2. What is it?
2 / 23

3. The Triangle
3 / 23

4. What is a snapshot?
4 / 23

5. 5 / 23

6. 6 / 23

7. Snapshot
exports[`Button adds an icon if an icon source is present 1`] = `
<button>
<img
alt=""
className="icon"
role="presentation"
src="/path/to/image.ext"
/>
Submit
</button>
`;
7 / 23

8. How does it work?
8 / 23

9. Example
const Button = ({ children, iconSrc }) => (
<button>
{iconSrc &&
<img
src={iconSrc}
alt=""
role="presentation"
className="icon"
/>
}
{children}
</button>
);
9 / 23

10. Example
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import Button from './';
describe('Button', () => {
it('adds an icon if an icon source is present', () => {
const result = shallow(
<Button iconSrc="/path/to/image.ext">
Submit
</Button>,
);
expect(toJson(result)).toMatchSnapshot();
});
});
10 / 23

11. 11 / 23

12. Refactoring time!
const Button = ({ children, iconSrc }) => (
<button>
{children}
{iconSrc &&
<img
src={iconSrc}
alt=""
role="presentation"
className="icon"
/>
}
</button>
);
12 / 23

13. 13 / 23

14. 14 / 23

15. Testing Framework
15 / 23

16. Jest vs Ava
16 / 23

17. 17 / 23

18. What's good?
18 / 23

19. Good stuff
1. Better coverage
2. Easy to write
3. Easy to update
4. Great for refactoring
19 / 23

20. What's bad?
20 / 23

21. Bad stuff
1. No TDD
2. Merge con icts
3. Test description
4. Over-use
5. Laziness
21 / 23

22. Should I use them or
not?
22 / 23

23. Thank you!
Anna Doubkova, @lithinn
23 / 23