Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Saving Time By Testing With Jest

761 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

×