O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Saving Time By Testing With Jest

1.155 visualizações

Publicada em

A talk from All Things Open 2017 on how using the Jest test runner can save you time.

Publicada em: Software
  • Seja o primeiro a comentar

Saving Time By Testing With Jest

  1. 1. Saving Time By Testing With Jest Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org
  2. 2. Who Am I? • Senior Software Engineer @ Windsor Circle • Live in Durham NC • Jest user since early 2016 • Blogger @ benmccormick.org
  3. 3. What To Expect • What is Jest? • What problems does it try to solve? • How can it save me time? • Demo • Q & A
  4. 4. So What Is Jest? • Developed by Facebook for internal testing needs • Open Sourced in 2014 • Mostly stagnant for 2 years • Revived in late 2015 / early 2016
  5. 5. JavaScript Testing Challenges • Many Environments • Async Code • User Interface code is hard to test
  6. 6. JavaScript Testing Challenges • People don’t write tests
  7. 7. Prior Art: Who has been facing these problems? • Test Runners: Mocha, Jasmine, Karma, Tape, AVA, QUnit • Test libraries: Chai, Sinon, should.js, expect.js, Istanbul
  8. 8. How Does Jest Fit In? • Jest saves you time • Jest is visual • Jest is reliable • Jest (now) has a good learning curve
  9. 9. How Does Jest Fit In? • Jest does not test every environment • Jest is not simple • Jest is still growing and changing
  10. 10. How Does Jest Save You Time? • Setting Up Tests: Simple configuration • Writing Tests: Simple UI tests, familiar syntax • Running Tests: Fast startup, fast test runs, smart watch mode • Fixing Tests: Clear error and failure messages
  11. 11. Setup Fast • 1 Dependency for Test Runner, assertion library, code coverage • No extra configuration for Babel support (just 1 dependency) • Sane defaults (run anything in a __tests__ directory) • Codemods to transition from other libraries
  12. 12. Setup Fast: One Dependency Karma + Jasmine (Vue.js) Jest *Not necessarily optimized
  13. 13. Setup Fast: Minimal Project
  14. 14. Setup Fast: Minimal Project
  15. 15. Setup Fast: Sane Defaults
  16. 16. Setup Fast: Easy Babel Support
  17. 17. Quick Poll: • Mocha • Jasmine • Chai • AVA • expect.js • Should.js • Tape • Proxyquire
  18. 18. Setup Fast: Codemods https://www.npmjs.com/package/jest-codemods
  19. 19. Write Tests Fast • Familiar syntax: Jasmine or `test()` style • Great mocking + assertion APIS • Snapshot Tests!
  20. 20. Write Tests Fast: Syntax
  21. 21. Write Tests Fast: APIs
  22. 22. Write Tests Fast: Extensible APIs
  23. 23. Write Tests Fast: Snapshot Tests • expect(<json>).toMatchSnapshot() • Captures the current state of the code • Future runs compare the state to the previous state of the code • Has special handling for React components by default • Can write serializers for other type of data
  24. 24. We updated the component to add a #test as the default
  25. 25. `jest -u` updates snapshots to the new state
  26. 26. Write Tests Fast: Snapshot Tests • Pro: Quick To Write and update • Pro: Catch side effects • Con: Don’t enforce correctness/communicate developer intent • Con: Require a strong process backing them up • Good for: UI tests, runs against large amounts of real world data
  27. 27. Run Tests Fast • Tests Run in Node, no browser overhead • Tests Run in Parallel • Smart Testing - only run the tests that changed • Watch Mode
  28. 28. Run Tests Fast: Smart Tests • Jest is aware of modules dependency Graph • Runs tests when any dependency of the test (or the test itself changes) • Git based • Don’t run unnecessary tests!
  29. 29. Run Tests Fast: Watch Mode • Watch mode is a cli that watches for file changes • Can control which tests are watched
  30. 30. Fix Tests Fast • Failed Tests Run First • Accurate error reporting by line • Editor Integration (VS Code)
  31. 31. DEMO
  32. 32. The Future? • Multi Language Support • More environment Support? • More Editor Integrations ? Repo: https://github.com/facebook/jest
  33. 33. Want more detail?
  34. 34. Questions?
  35. 35. Ben McCormick Windsor Circle Twitter: @ben336 Blog: http://benmccormick.org

×