Testing!

Components

What do we test?

• Given a set of initial states, does the component exhibit the appropriate side-effects/behavior

  • Should be minimal, and separated from complex hook behavior

• Given a set of initial states, does the component render the appropriate output

  • Limited exclusively to the code logic in the associated component file

...

• Separate complex hook logic into custom hook, and mock that hook when testing the component

• Mock all sub-components

• Take snapshots of the component in different states (incoming props and hook output), and inspect those snapshots for relevant details.

Hooks

What do we test?

• Given a set of initial states, does the hook exhibit the appropriate side-effects/behavior

• Given a set of initial states, does the hook return the appropriate output

  • Limited exclusively to the code logic in the associated component file

...

• Mock all react hooks to have testable output

• use keyed state (from react-unit-test-utils) to validate state usage.

Asynchronous events

What do we test?

• Given a successful return of valid data, does the expected follow-on behavior occur

• Given a failure of the asynchronous event, does the expected follow-on behavior occur

...