Skip to content

Latest commit

 

History

History
65 lines (43 loc) · 4.29 KB

enzyme-testing.md

File metadata and controls

65 lines (43 loc) · 4.29 KB

Adding Enzyme Tests to your React project

Prerequisites

Here are links to lessons that should be completed before this lesson:

Motivation

  • As an open source testing tool developed by Airbnb, Enzyme is stable and likely to be used in various projects.
  • Enzyme is officially recommended by React and designed to have painless installation and usage when pairing with Jest in React projects.
  • On the other hand, Enzyme is a testing utility, not a framework. It is unopinionated and can be pair with a testing framework other than Jest, including Jasmine.
  • Enzyme greatly increases the number of methods available, resulting in a simpler and more readable interface for testing.

Objectives

Participants will be able to:

  • Install Enzyme in React.
  • Understand the differences between different rendering methods.
  • Perform basic testing with Enzyme as a way to render and traverse the DOM.

Specific Things to Learn

  • What and why Enzyme and Jest
  • Installation and configuration
  • Shallow vs Mount vs Render
  • Common Enzyme methods for traversing and manipulating the DOM

Materials

Lesson

Supplemental Resource

Common Mistakes / Misconceptions

  • While mount() and render() is more powerful than shallow(), the rendering of nested children will slow down the testing. In unit testing, shallow() is the preferred method for many.
  • When testing, remember to test a fail case as well to avoid false-positive results.

Challenge

Read Jest's tutorial on Snapshot Testing and try to implement the test on the code created in the lesson done above.

Check for Understanding

Find a partner, then go to the test file of Airbnb's Rheostat's project. Pick an it() test statement that contains either shallow or mount, then try to guess what it does and explain it to your partner. Look up Enzyme doc for unfamiliar methods. Note that the test file also uses Sinon and chai. In those cases, the methods may be found in the documentation for Sinon or chai instead.