Flight rules for Enzyme

❤️ Inspired by Git Flight Rules

🌍 English ∙ 简体中文

What are "flight rules"?

A guide for astronauts (now, programmers using Git) about what to do when things go wrong.

Flight Rules are the hard-earned body of knowledge recorded in manuals that list, step-by-step, what to do if X occurs, and why. Essentially, they are extremely detailed, scenario-specific standard operating procedures. [...]

NASA has been capturing our missteps, disasters and solutions since the early 1960s, when Mercury-era ground teams first started gathering "lessons learned" into a compendium that now lists thousands of problematic situations, from engine failure to busted hatch handles to computer glitches, and their solutions.

— Chris Hadfield, An Astronaut's Guide to Life.

Conventions for this document

This Document should work for Enzyme version ^3.10.0. See the enzyme website to check your enzyme version.

Table of Contents generated with DocToc

• SubComponent
• Render Component
  • I want to only render the top level component, or I don't want to render child component
  • I want to render the component with all child components.
  • I want to get shallowWrapper of a child component in a shallow render component
  • I want to get a CheerioWrapper around the rendered HTML of the single node's subtree in a shallow/mount render component.
  • I want to get a string of the rendered HTML markup of the entire component (not just the shallow-rendered part)
  • I want to get an HTML-like string of the wrapper for debugging purposes of the component
  • I want to get an react component instance of the component
• Other Resources
  • Vidoes
  • Articles

SubComponent

this component will be used in all these sample code below

const SubComponent = props => (
    <a href="https://airbnb.io/enzyme/docs/api">{props.children}</a>
);

Render Component

I want to only render the top level component, or I don't want to render child component

shallow

const wrapper = shallow(
    <h1>
        Hello Enzyme!
        <SubComponent />
    </h1>
);

// console.log(wrapper.debug());
// <h1>
//   Hello Enzyme!
//   <SubComponent />
// </h1>

Visit Shallow API

---

I want to render the component with all child components.

mount

const wrapper = mount(
    <h1>
        Hello Enzyme!
        <SubComponent>Vist Enzyme Website</SubComponent>
    </h1>
);

// console.log(wrapper.debug());
// <h1>
//   Hello Enzyme!
//   <SubComponent>
//     <a href="https://airbnb.io/enzyme/docs/api">
//       Vist Enzyme Website
//     <a/>
//   <SubComponent>
// </h1>

Visit Mount API

---

I want to get shallowWrapper of a child component in a shallow render component

ShallowWrapper.dive

const wrapper = shallow(
    <h1>
        Hello Enzyme!
        <SubComponent>Vist Enzyme Website</SubComponent>
    </h1>
);
const shallowWrapper = wrapper.find(SubComponent).dive();

// console.log(wrapper.debug());
// <SubComponent>
//   <a href="https://airbnb.io/enzyme/docs/api">
//     Vist Enzyme Website
//   <a/>
// <SubComponent>

Visit ShallowWrapper/dive API

---

I want to get a CheerioWrapper around the rendered HTML of the single node's subtree in a shallow/mount render component.

ShallowWrapper.render

ReactWrapper.render

const wrapper = shallow(
// const wrapper = mount(
    <h1>
        Hello Enzyme!
        <SubComponent>Vist Enzyme Website</SubComponent>
    </h1>
);
const cheerioWrapper = wrapper.find(SubComponent).render();

// output:
// <a href="https://airbnb.io/enzyme/docs/api">
//   Vist Enzyme Website
// <a/>

Visit ShallowWrapper/render API

Visit ReactWrapper/render API

---

I want to get a string of the rendered HTML markup of the entire component (not just the shallow-rendered part)

ShallowWrapper.html

ReactWrapper.html

const wrapper = shallow(
// const wrapper = mount(
    <h1>
        Hello Enzyme!
        <SubComponent>Vist Enzyme Website</SubComponent>
    </h1>
);

const output = wrapper.html();
// output:
// <h1>Hello Enzyme!<a href="https://airbnb.io/enzyme/docs/api">Vist Enzyme Website<a/></h1>

Visit ShallowWrapper/html API

Visit ReactWrapper/html API

---

I want to get an HTML-like string of the wrapper for debugging purposes of the component

ShallowWrapper.debug

ReactWrapper.debug

const wrapper = mount(
// const wrapper = shallow(
    <h1>
        Hello Enzyme!
        <SubComponent>Vist Enzyme Website</SubComponent>
    </h1>
);

// console.log(wrapper.debug());
// <h1>
//   Hello Enzyme!
//   <a href="https://airbnb.io/enzyme/docs/api">
//     Vist Enzyme Website
//   <a/>
// </h1>

Visit ShallowWrapper/debug API

Visit ReactWrapper/debug API

---

I want to get an react component instance of the component

NOTE: can only be called on a wrapper instance that is also the root instance. With React 16 and above, instance() returns null for stateless functional components.

ShallowWrapper.instance

ReactWrapper.instance

const wrapper = mount(
// const wrapper = shallow(
    <h1>
        Hello Enzyme!
        <SubComponent>Vist Enzyme Website</SubComponent>
    </h1>
);

wrapper.instance();

Visit ShallowWrapper/debug API

Visit ReactWrapper/debug API

---

Other Resources

Vidoes

• React Redux Unit & Integration Testing with Jest and Enzyme - The purpose of this tutorial series is to demonstrate how to properly implement a test first approach (TDD) to coding with react and redux.

Articles

• Testing React With Jest and Enzyme - Look at how to setup and use Jest and Enzyme to test a React application
• Test your redux container with enzyme