Testing Difftone app

Types of features to test:

  • UI Feature
  • Feature that fires callbacks
  • Feature that uses mobx store

Testing UI Features:

.toMatchSnapshot

1. Jest creates Component's return structure snapshot

2. In further test runs jest compares stored snapshot with freshly created snapshot

3. After any component's change, we should recreate snapshot in order to store up-to-date version

Testing feature that fires callback

Types of callbacks

  • Callbacks coming from props
  • Callbacks coming from imports

Callback from props

Callback from imports

Be aware of!

Be aware of!

Feature uses mobx store

@difftone/stores/__mocks__/index.ts ( navigationStore )

The issue with mobx store mocking:

Workaround?

Workaround

at stores/__mocks__/navigationStore.ts

usage at test:

Store mock updates cycle

Default state from __mocks__/store.ts

Put new state into jestFn.mockReturnValue

Firing updateStore() in order to set new state into the mock

Let's try it out!

Made with Slides.com