Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Fully Render React Components with Enzyme


    Full DOM rendering is ideal for use cases where you have components that interact with DOM APIs, or require React lifecycles. In this lesson we will render components with the mount method from Enzyme. We’ll pass through customized options to render our component differently.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: Full DOM rendering is idea for use cases where you have components that may interact with DOM APIs, or may require the full React lifecycle in order to fully test a component.

    For example, if you need to test the component to mount lifecycle. Let's import mount, and then copy this describe block. This first one is using shallow rendering. The second is going to use that mount rendering method.

    Next, let's change the shallows to mount. Full DOM rendering requires that a full DOM API be available at the global scope. This means that we must run our test in an environment that at least looks like a browser environment.

    The recommended approach is to import a library called jsdom, which is essentially a headless browser implemented completely in JS.

    Now, I have jsdom already installed, because I am using Create React App, but if you're not, then you'll need to install this package.

    The mount method has a second optional configuration object that holds context, as well as attached to. The context object is context that we want to pass into our component. The attached to is when we want to attach our component to a specific DOM element.

    Unlike shallow or static rendering, full rendering actually mounts the component in a DOM, which means that test can affect each other if they're using the same DOM.

    We're using the unmount method here to unmount the component from the DOM. This can also be used to simulate a component growing through an unmount mount lifecycle in React.

    Also, many of the same methods shallow rendering has can be used with mount. As you can see, our new test block is passing with the snapshot and the find method.

    As a heads-up, the mount to JSON rendering is slightly different than the shallow rendering. Our snapshot test will fail if we switch this out.