Testing React Function Components with Hooks using Enzyme

Login Component

Enzyme and Jest

Shallow vs Mount

Testing component ui and props

Testing state updates

Lifecycle hooks

Methods that don’t update state

Testing uncontrolled components

Adding data attributes
Test for data attributes

Refactor to stateless components and a custom hook (Optional)

Testing our custom hook

Summary

  • Test entire props object of a rendered component instead of a single prop
  • Reuse the spec to test component with and without props passed
  • Check direct-effects for testing hooks by simulating events
  • To test unsupported hooks use mount and check for direct-effects
  • Refactor methods out of the component that don’t update component state
  • Use data-attributes to test state of uncontrolled components

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store