Testing the PADM with Jest

Emile Choghi

What this talk is

  • What Jest is and how to use it.
  • Setting up the PADM testing environment.
  • How to test our components.
  • What comes next for the PADM?

What is Jest?

  • Open source testing library, written by Facebook.
  • For testing all JavaScript code, popular with React.
  • Uses Jasmine as its testing engine.
  • Zero config necessary, lots of tools.

What's inside? 📦

  • Snapshot testing.
  • Coverage reports.
  • Default browser-like environment (JSDOM).
  • Interactive "watch" mode
  • Lots of matchers

Setting up the test environment

  • JSDOM doesn't support every DOM API (e.g. localStorage, cookies..).
  • Network requests should not be fired in tests.
  • Static assets need to be handled.
  • Code must be transpiled with babel.

So what is a mock?

  • Captures calls.
  • Sets return values.
  • Controls implementation.
  • Replaces a module we don’t control with something we do.
Theme: Night Owl by Sarah Drasner
Font: Dank Mono by Phil Plückthun

Writing Tests ✍

  • Write tests. Not too many. Mostly integration. - Guillermo Rauch‏
  • Don't rely on snapshots, keep them small.
  • You should very rarely have to change tests when you refactor code.

How do we write tests?

testUtils: renderApp

renderApp usage

testUtils: renderPartial

render usage

Running tests 🏃

What's next?

  • Improve test coverage: important business logic.
  • Continuous integration with Jenkins.
  • Type checking.
  • Automated testing with API Fortress

Extras 🎉

  • New error overlay for development server.
  • Reduced main bundle size by almost 90%.
  • Faster build times with Webpack 4 and Babel 7.
  • Improved code chunking.
  • Less webpack config.