Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Snapshot testing by Anna Doubkova

369 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Snapshot testing by Anna Doubkova

  1. 1. Snapshot Testing Anna Doubkova, @lithinn 1 / 23
  2. 2. What is it? 2 / 23
  3. 3. The Triangle 3 / 23
  4. 4. What is a snapshot? 4 / 23
  5. 5. 5 / 23
  6. 6. 6 / 23
  7. 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. 8. How does it work? 8 / 23
  9. 9. Example const Button = ({ children, iconSrc }) => ( <button> {iconSrc && <img src={iconSrc} alt="" role="presentation" className="icon" /> } {children} </button> ); 9 / 23
  10. 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. 11 / 23
  12. 12. Refactoring time! const Button = ({ children, iconSrc }) => ( <button> {children} {iconSrc && <img src={iconSrc} alt="" role="presentation" className="icon" /> } </button> ); 12 / 23
  13. 13. 13 / 23
  14. 14. 14 / 23
  15. 15. Testing Framework 15 / 23
  16. 16. Jest vs Ava 16 / 23
  17. 17. 17 / 23
  18. 18. What's good? 18 / 23
  19. 19. Good stuff 1. Better coverage 2. Easy to write 3. Easy to update 4. Great for refactoring 19 / 23
  20. 20. What's bad? 20 / 23
  21. 21. Bad stuff 1. No TDD 2. Merge con icts 3. Test description 4. Over-use 5. Laziness 21 / 23
  22. 22. Should I use them or not? 22 / 23
  23. 23. Thank you! Anna Doubkova, @lithinn 23 / 23

×