Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.

Use enzyme's render function to generate HTML from your React tree, and analyze the resulting HTML structure.

render returns a wrapper very similar to the other renderers in enzyme, mount and shallow; however, render uses a third party HTML parsing and traversal library Cheerio. We believe that Cheerio handles parsing and traversing HTML extremely well, and duplicating this functionality ourselves would be a disservice.

Example Usage import React from 'react'; import { render } from 'enzyme'; import PropTypes from 'prop-types';

describe('', () => { it('renders three .foo-bars', () => { const wrapper = render(); expect(wrapper.find('.foo-bar')).to.have.lengthOf(3); });

it('rendered the title', () => { const wrapper = render(); expect(wrapper.text()).to.contain('unique'); });

it('renders a div', () => { const wrapper = render(

it('can pass in context', () => { function SimpleComponent(props, context) { const { name } = context; return

const context = { name: 'foo' };
const wrapper = render(<SimpleComponent />, { context });
expect(wrapper.text()).to.equal('foo');

}); });

Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or need to test components that are wrapped in higher order components.

Full DOM rendering requires that a full DOM API be available at the global scope. This means that it must be run in an environment that at least “looks like” a browser environment. If you do not want to run your tests inside of a browser, the recommended approach to using mount is to depend on a library called jsdom which is essentially a headless browser implemented completely in JS.