

Enzyme
======

 Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

 Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

 Upgrading from Enzyme 2.x or React < 16
=======================================

 Are you here to check whether or not Enzyme is compatible with React 16? Are you currently using Enzyme 2.x? Great! Check out our [migration guide](docs/guides/migration-from-2-to-3) for help moving on to Enzyme v3 where React 16 is supported.

 ### 
[Installation](docs/installation/index)

 To get started with enzyme, you can simply install it via npm. You will need to install enzyme along with an Adapter corresponding to the version of react (or other UI Component library) you are using. For instance, if you are using enzyme with React 16, you can run:

 
```
npm i --save-dev enzyme enzyme-adapter-react-16

```
 Each adapter may have additional peer dependencies which you will need to install as well. For instance, `enzyme-adapter-react-16` has peer dependencies on `react` and `react-dom`.

 At the moment, Enzyme has adapters that provide compatibility with `React 16.x`, `React 15.x`, `React 0.14.x` and `React 0.13.x`.

 The following adapters are officially provided by enzyme, and have the following compatibility with React:

 

| Enzyme Adapter Package | React semver compatibility |
| --- | --- |
| `enzyme-adapter-react-16` | `^16.4.0-0` |
| `enzyme-adapter-react-16.3` | `~16.3.0-0` |
| `enzyme-adapter-react-16.2` | `~16.2` |
| `enzyme-adapter-react-16.1` | `~16.0.0-0 \ | \ | ~16.1` |
| `enzyme-adapter-react-15` | `^15.5.0` |
| `enzyme-adapter-react-15.4` | `15.0.0-0 - 15.4.x` |
| `enzyme-adapter-react-14` | `^0.14.0` |
| `enzyme-adapter-react-13` | `^0.13.0` |

 Finally, you need to configure enzyme to use the adapter you want it to use. To do this, you can use the top level `configure(...)` API.

 
```
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

```
 3rd Party Adapters
==================

 It is possible for the community to create additional (non-official) adapters that will make enzyme work with other libraries. If you have made one and it's not included in the list below, feel free to make a PR to this README and add a link to it! The known 3rd party adapters are:

 

| Adapter Package | For Library | Status |
| --- | --- | --- |
| [`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) | [`preact`](https://github.com/developit/preact) | (stable) |
| [`enzyme-adapter-inferno`](https://github.com/bbc/enzyme-adapter-inferno) | [`inferno`](https://github.com/infernojs/inferno) | (work in progress) |

 Running Enzyme Tests
====================

 Enzyme is unopinionated regarding which test runner or assertion library you use, and should be compatible with all major test runners and assertion libraries out there. The documentation and examples for enzyme use [mocha](https://mochajs.org/) and [chai](http://chaijs.com/), but you should be able to extrapolate to your framework of choice.

 If you are interested in using enzyme with custom assertions and convenience functions for testing your React components, you can consider using:

 * [`chai-enzyme`](https://github.com/producthunt/chai-enzyme) with Mocha/Chai.
* [`jasmine-enzyme`](https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jasmine-enzyme) with Jasmine.
* [`jest-enzyme`](https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme) with Jest.
* [`should-enzyme`](https://github.com/rkotze/should-enzyme) for should.js.
* [`expect-enzyme`](https://github.com/PsychoLlama/expect-enzyme) for expect.

 [Using Enzyme with Mocha](docs/guides/mocha)

 [Using Enzyme with Karma](docs/guides/karma)

 [Using Enzyme with Browserify](docs/guides/browserify)

 [Using Enzyme with SystemJS](docs/guides/systemjs)

 [Using Enzyme with Webpack](docs/guides/webpack)

 [Using Enzyme with JSDOM](docs/guides/jsdom)

 [Using Enzyme with React Native](docs/guides/react-native)

 [Using Enzyme with Jest](docs/guides/jest)

 [Using Enzyme with Lab](docs/guides/lab)

 [Using Enzyme with Tape and AVA](docs/guides/tape-ava)

 Basic Usage
===========

 
[Shallow Rendering](docs/api/shallow)
--------------------------------------

 
```
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

```
 Read the full [API Documentation](docs/api/shallow)

 
[Full DOM Rendering](docs/api/mount)
-------------------------------------

 
```
import React from 'react';
import sinon from 'sinon';
import { expect } from 'chai';
import { mount } from 'enzyme';

import Foo from './Foo';

describe('<Foo />', () => {
  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });

  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
    Foo.prototype.componentDidMount.restore();
  });
});

```
 Read the full [API Documentation](docs/api/mount)

 
[Static Rendered Markup](docs/api/render)
------------------------------------------

 
```
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';

import Foo from './Foo';

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

  it('renders the title', () => {
    const wrapper = render(<Foo title="unique" />);
    expect(wrapper.text()).to.contain('unique');
  });
});

```
 Read the full [API Documentation](docs/api/render)

 ### 
React Hooks support

 Enzyme supports [react hooks](https://reactjs.org/docs/hooks-intro.html) with some limitations in [`.shallow()`](https://airbnb.io/enzyme/docs/api/shallow.html) due to upstream issues in React's shallow renderer:

 * `useEffect()` and `useLayoutEffect()` don't get called in the React shallow renderer. [Related issue](https://github.com/facebook/react/issues/15275)
* `useCallback()` doesn't memoize callback in React shallow renderer. [Related issue](https://github.com/facebook/react/issues/15774)

 #### 
[`ReactTestUtils.act()`](https://reactjs.org/docs/test-utils.html#act) wrap

 If you're using React 16.8+ and `.mount()`, Enzyme will wrap apis including [`.simulate()`](https://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html), [`.setProps()`](https://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html), [`.setContext()`](https://airbnb.io/enzyme/docs/api/ReactWrapper/setContext.html), [`.invoke()`](https://airbnb.io/enzyme/docs/api/ReactWrapper/invoke.html) with [`ReactTestUtils.act()`](https://reactjs.org/docs/test-utils.html#act) so you don't need to manually wrap it.

 A common pattern to trigger handlers with `.act()` and assert is:

 
```
const wrapper = mount(<SomeComponent />);
act(() => wrapper.prop('handler')());
wrapper.update();
expect(/* ... */);

```
 We cannot wrap the result of `.prop()` (or `.props()`) with `.act()` in Enzyme internally since it will break the equality of the returned value. However, you could use `.invoke()` to simplify the code:

 
```
const wrapper = mount(<SomeComponent />);
wrapper.invoke('handler')();
expect(/* ... */);

```
 ### 
Future

 [Enzyme Future](https://enzymejs.github.io/enzyme/docs/future.html)

 ### 
Contributing

 See the [Contributors Guide](https://enzymejs.github.io/enzyme/CONTRIBUTING.html)

 ### 
In the wild

 Organizations and projects using `enzyme` can list themselves [here](inthewild.md).

 ### 
License

 [MIT](license.md)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/index.html>

Migration Guide for enzyme v2.x to v3.x
=======================================

 The change from enzyme v2.x to v3.x is a more significant change than in previous major releases, due to the fact that the internal implementation of enzyme has been almost completely rewritten.

 The goal of this rewrite was to address a lot of the major issues that have plagued enzyme since its initial release. It was also to simultaneously remove a lot of the dependencies that enzyme has on React internals, and to make enzyme more "pluggable", paving the way for enzyme to be used with "React-like" libraries such as Preact and Inferno.

 We have done our best to make enzyme v3 as API compatible with v2.x as possible, however there are a handful of breaking changes that we decided we needed to make, intentionally, in order to support this new architecture and also improve the usability of the library long-term.

 Airbnb has one of the largest enzyme test suites, coming in at around 30,000 enzyme unit tests. After upgrading enzyme to v3.x in Airbnb's code base, 99.6% of these tests succeeded with no modifications at all. Most of the tests that broke we found to be easy to fix, and some we found to actually depend on what could arguably be considered a bug in v2.x, and the breakage was actually desired.

 In this guide, we will go over a couple of the most common breakages that we ran into, and how to fix them. Hopefully this will make your upgrade path that much easier. If during your upgrade you find a breakage that doesn't seem to make sense to you, feel free to file an issue.

 
Configuring your Adapter
-------------------------

 enzyme now has an "Adapter" system. This means that you now need to install enzyme along with another module that provides the Adapter that tells enzyme how to work with your version of React (or whatever other React-like library you are using).

 At the time of writing this, enzyme publishes "officially supported" adapters for React 0.13.x, 0.14.x, 15.x, and 16.x. These adapters are npm packages of the form `enzyme-adapter-react-{{version}}`.

 You will want to configure enzyme with the adapter you'd like to use before using enzyme in your tests. The way to do this is with `enzyme.configure(...)`. For example, if your project depends on React 16, you would want to configure enzyme this way:

 
```
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

```
 The list of adapter npm packages for React semver ranges are as follows:

 

| enzyme Adapter Package | React semver compatibility |
| --- | --- |
| `enzyme-adapter-react-16` | `^16.4.0-0` |
| `enzyme-adapter-react-16.3` | `~16.3.0-0` |
| `enzyme-adapter-react-16.2` | `~16.2` |
| `enzyme-adapter-react-16.1` | `~16.0.0-0 \ | \ | ~16.1` |
| `enzyme-adapter-react-15` | `^15.5.0` |
| `enzyme-adapter-react-15.4` | `15.0.0-0 - 15.4.x` |
| `enzyme-adapter-react-14` | `^0.14.0` |
| `enzyme-adapter-react-13` | `^0.13.0` |

 
Element referential identity is no longer preserved
----------------------------------------------------

 enzyme's new architecture means that the react "render tree" is transformed into an intermediate representation that is common across all react versions so that enzyme can properly traverse it independent of React's internal representations. A side effect of this is that enzyme no longer has access to the actual object references that were returned from `render` in your React components. This normally isn't much of a problem, but can manifest as a test failure in some cases.

 For example, consider the following example:

 
```
import React from 'react';
import Icon from './path/to/Icon';

const ICONS = {
  success: <Icon name="check-mark" />,
  failure: <Icon name="exclamation-mark" />,
};

const StatusLabel = ({ id, label }) => <div>{ICONS[id]}{label}{ICONS[id]}</div>;

```
 
```
import { shallow } from 'enzyme';
import StatusLabel from './path/to/StatusLabel';
import Icon from './path/to/Icon';

const wrapper = shallow(<StatusLabel id="success" label="Success" />);

const iconCount = wrapper.find(Icon).length;

```
 In v2.x, `iconCount` would be 1. In v3.x, it will be 2. This is because in v2.x it would find all of the elements matching the selector, and then remove any duplicates. Since `ICONS.success` is included twice in the render tree, but it's a constant that's reused, it would show up as a duplicate in the eyes of enzyme v2.x. In enzyme v3, the elements that are traversed are transformations of the underlying react elements, and are thus different references, resulting in two elements being found.

 Although this is a breaking change, I believe the new behavior is closer to what people would actually expect and want. Having enzyme wrappers be immutable results in more deterministic tests that are less prone to flakiness from external factors.

 ### 
Calling `props()` after a state change

 In `enzyme` v2, executing an event that would change a component state (and in turn update props) would return those updated props via the `.props` method.

 Now, in `enzyme` v3, you are required to re-find the component; for example:

 
```
class Toggler extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { on: false };
  }

  toggle() {
    this.setState(({ on }) => ({ on: !on }));
  }

  render() {
    const { on } = this.state;
    return (<div id="root">{on ? 'on' : 'off'}</div>);
  }
}

it('passes in enzyme v2, fails in v3', () => {
  const wrapper = mount(<Toggler />);
  const root = wrapper.find('#root');
  expect(root.text()).to.equal('off');

  wrapper.instance().toggle();

  expect(root.text()).to.equal('on');
});

it('passes in v2 and v3', () => {
  const wrapper = mount(<Toggler />);
  expect(wrapper.find('#root').text()).to.equal('off');

  wrapper.instance().toggle();

  expect(wrapper.find('#root').text()).to.equal('on');
});

```
 
`children()` now has slightly different meaning
------------------------------------------------

 enzyme has a `.children()` method which is intended to return the rendered children of a wrapper.

 When using `mount(...)`, it can sometimes be unclear exactly what this would mean. Consider for example the following react components:

 
```
class Box extends React.Component {
  render() {
    const { children } = this.props;
    return <div className="box">{children}</div>;
  }
}

class Foo extends React.Component {
  render() {
    return (
      <Box bam>
        <div className="div" />
      </Box>
    );
  }
}

```
 Now lets say we have a test which does something like:

 
```
const wrapper = mount(<Foo />);

```
 At this point, there is an ambiguity about what `wrapper.find(Box).children()` should return. Although the `<Box ... />` element has a `children` prop of `<div className="div" />`, the actual rendered children of the element that the box component renders is a `<div className="box">...</div>` element.

 Prior enzyme v3, we would observe the following behavior:

 
```
wrapper.find(Box).children().debug();
// => <div className="div" />

```
 In enzyme v3, we now have `.children()` return the *rendered* children. In other words, it returns the element that is returned from that component's `render` function.

 
```
wrapper.find(Box).children().debug();
// =>
// <div className="box">
//   <div className="div" />
// </div>

```
 This may seem like a subtle difference, but making this change will be important for future APIs we would like to introduce.

 
`find()` now returns host nodes and DOM nodes
----------------------------------------------

 In some cases find will return a host node and DOM node. Take the following for example:

 
```
const Foo = () => <div/>;
const wrapper = mount(
  <div>
    <Foo className="bar" />
    <div className="bar"/>
   </div>
);
console.log(wrapper.find('.bar').length); // 2

```

Since `<Foo/>` has the className `bar` it is returned as the *hostNode*. As expected the `<div>` with the className `bar` is also returned

 To avoid this you can explicity query for the DOM node: `wrapper.find('div.bar')`. Alternatively if you would like to only find host nodes use [hostNodes()](https://airbnb.io/enzyme/docs/api/ShallowWrapper/hostNodes.html)

 
For `mount`, updates are sometimes required when they weren't before
---------------------------------------------------------------------

 React applications are dynamic. When testing your react components, you often want to test them before *and after* certain state changes take place. When using `mount`, any react component instance in the entire render tree could register code to initiate a state change at any time.

 For instance, consider the following contrived example:

 
```
import React from 'react';

class CurrentTime extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      now: Date.now(),
    };
  }

  componentDidMount() {
    this.tick();
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  tick() {
    this.setState({ now: Date.now() });
    this.timer = setTimeout(tick, 0);
  }

  render() {
    const { now } = this.state;
    return <span>{now}</span>;
  }
}

```
 In this code, there is a timer that continuously changes the rendered output of this component. This might be a reasonable thing to do in your application. The thing is, enzyme has no way of knowing that these changes are taking place, and no way to automatically update the render tree. In enzyme v2, enzyme operated *directly* on the in-memory representation of the render tree that React itself had. This means that even though enzyme couldn't know when the render tree was updated, updates would be reflected anyway, since React *does* know.

 enzyme v3 architecturally created a layer where React would create an intermediate representation of the render tree at an instance in time and pass that to enzyme to traverse and inspect. This has many advantages, but one of the side effects is that now the intermediate representation does not receive automatic updates.

 enzyme does attempt to automatically "update" the root wrapper in most common scenarios, but these are only the state changes that it knows about. For all other state changes, you may need to call `wrapper.update()` yourself.

 The most common manifestation of this problem can be shown with the following example:

 
```
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  increment() {
    this.setState(({ count }) => ({ count: count + 1 }));
  }

  decrement() {
    this.setState(({ count }) => ({ count: count - 1 }));
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <div className="count">Count: {count}</div>
        <button type="button" className="inc" onClick={this.increment}>Increment</button>
        <button type="button" className="dec" onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

```
 This is a basic "counter" component in React. Here our resulting markup is a function of `this.state.count`, which can get updated by the `increment` and `decrement` functions. Let's take a look at what some enzyme tests with this component might look like, and when we do or don't have to call `update()`.

 
```
const wrapper = shallow(<Counter />);
wrapper.find('.count').text(); // => "Count: 0"

```
 As we can see, we can easily assert on the text and the count of this component. But we haven't caused any state changes yet. Let's see what it looks like when we simulate a `click` event on the increment and decrement buttons:

 
```
const wrapper = shallow(<Counter />);
wrapper.find('.count').text(); // => "Count: 0"
wrapper.find('.inc').simulate('click');
wrapper.find('.count').text(); // => "Count: 1"
wrapper.find('.inc').simulate('click');
wrapper.find('.count').text(); // => "Count: 2"
wrapper.find('.dec').simulate('click');
wrapper.find('.count').text(); // => "Count: 1"

```
 In this case enzyme will automatically check for updates after an event simulation takes place, as it knows that this is a very common place for state changes to occur. In this case there is no difference between v2 and v3.

 Let's consider a different way this test could have been written.

 
```
const wrapper = shallow(<Counter />);
wrapper.find('.count').text(); // => "Count: 0"
wrapper.instance().increment();
wrapper.find('.count').text(); // => "Count: 0" (would have been "Count: 1" in v2)
wrapper.instance().increment();
wrapper.find('.count').text(); // => "Count: 0" (would have been "Count: 2" in v2)
wrapper.instance().decrement();
wrapper.find('.count').text(); // => "Count: 0" (would have been "Count: 1" in v2)

```
 The problem here is that once we grab the instance using `wrapper.instance()`, enzyme has no way of knowing if you are going to execute something that will cause a state transition, and thus does not know when to ask for an updated render tree from React. As a result, `.text()` never changes value.

 The fix here is to use enzyme's `wrapper.update()` method after a state change has occurred:

 
```
const wrapper = shallow(<Counter />);
wrapper.find('.count').text(); // => "Count: 0"
wrapper.instance().increment();
wrapper.update();
wrapper.find('.count').text(); // => "Count: 1"
wrapper.instance().increment();
wrapper.update();
wrapper.find('.count').text(); // => "Count: 2"
wrapper.instance().decrement();
wrapper.update();
wrapper.find('.count').text(); // => "Count: 1"

```
 In practice we have found that this isn't actually needed that often, and when it is it is not difficult to add. Additionally, having the enzyme wrapper automatically update alongside the real render tree can result in flaky tests when writing asynchronous tests. This breaking change was worth the architectural benefits of the new adapter system in v3, and we believe is a better choice for an assertion library to take.

 
`ref(refName)` now returns the actual ref instead of a wrapper
---------------------------------------------------------------

 In enzyme v2, the wrapper returned from `mount(...)` had a prototype method on it `ref(refName)` that returned a wrapper around the actual element of that ref. This has now been changed to return the actual ref, which we believe is a more intuitive API.

 Consider the following simple react component:

 
```
class Box extends React.Component {
  render() {
    return <div ref="abc" className="box">Hello</div>;
  }
}

```
 In this case we can call `.ref('abc')` on a wrapper of `Box`. In this case it will return a wrapper around the rendered div. To demonstrate, we can see that both `wrapper` and the result of `ref(...)` share the same constructor:

 
```
const wrapper = mount(<Box />);
// this is what would happen with enzyme v2
expect(wrapper.ref('abc')).toBeInstanceOf(wrapper.constructor);

```
 In v3, the contract is slightly changed. The ref is exactly what React would assign as the ref. In this case, it would be a DOM Element:

 
```
const wrapper = mount(<Box />);
// this is what happens with enzyme v3
expect(wrapper.ref('abc')).toBeInstanceOf(Element);

```
 Similarly, if you have a ref on a composite component, the `ref(...)` method will return an instance of that element:

 
```
class Bar extends React.Component {
  render() {
    return <Box ref="abc" />;
  }
}

```
 
```
const wrapper = mount(<Bar />);
expect(wrapper.ref('abc')).toBeInstanceOf(Box);

```
 In our experience, this is most often what people would actually want and expect out of the `.ref(...)` method.

 To get the wrapper that was returned by enzyme 2:

 
```
const wrapper = mount(<Bar />);
const refWrapper = wrapper.findWhere((n) => n.instance() === wrapper.ref('abc'));

```
 
With `mount`, `.instance()` can be called at any level of the tree
-------------------------------------------------------------------

 enzyme now allows for you to grab the `instance()` of a wrapper at any level of the render tree, not just at the root. This means that you can `.find(...)` a specific component, then grab its instance and call `.setState(...)` or any other methods on the instance that you'd like.

 
With `mount`, `.getNode()` should not be used. `.instance()` does what it used to.
-----------------------------------------------------------------------------------

 For `mount` wrappers, the `.getNode()` method used to return the actual component instance. This method no longer exists, but `.instance()` is functionally equivalent to what `.getNode()` used to be.

 
With `shallow`, `.getNode()` should be replaced with `getElement()`
--------------------------------------------------------------------

 For shallow wrappers, if you were previously using `.getNode()`, you will want to replace those calls with `.getElement()`, which is now functionally equivalent to what `.getNode()` used to do. One caveat is that previously `.getNode()` would return the actual element instance that was created in the `render` function of the component you were testing, but now it will be a structurally equal react element, but not referentially equal. Your tests will need to be updated to account for this.

 
Private properties and methods have been removed
-------------------------------------------------

 There are several properties that are on an enzyme "wrapper" that were considered to be private and were undocumented as a result. Despite being undocumented, people may have been relying on them. In an effort to make making changes less likely to be accidentally breaking in the future, we have decided to make these properties properly "private". The following properties will no longer be accessible on enzyme `shallow` or `mount` instances:

 * `.node`
* `.nodes`
* `.renderer`
* `.unrendered`
* `.root`
* `.options`

 
Cheerio has been updated, thus `render(...)` has been updated as well
----------------------------------------------------------------------

 enzyme's top level `render` API returns a [Cheerio](https://github.com/cheeriojs/cheerio) object. The version of Cheerio that we use has been upgraded to 1.0.0. For debugging issues across enzyme v2.x and v3.x with the `render` API, we recommend checking out [Cheerio's Changelog](https://github.com/cheeriojs/cheerio/blob/48eae25c93702a29b8cd0d09c4a2dce2f912d1f4/History.md) and posting an issue on that repo instead of enzyme's unless you believe it is a bug in enzyme's use of the library.

 
CSS Selector
-------------

 enzyme v3 now uses a real CSS selector parser rather than its own incomplete parser implementation. This is done with [rst-selector-parser](https://github.com/aweary/rst-selector-parser) a fork of [scalpel](https://github.com/gajus/scalpel/) which is a CSS parser implemented with [nearley](https://nearley.js.org/). We don't think this should cause any breakages across enzyme v2.x to v3.x, but if you believe you have found something that did indeed break, please file an issue with us. Thank you to [Brandon Dail](https://github.com/aweary) for making this happen!

 
CSS Selector results and `hostNodes()`
---------------------------------------

 enzyme v3 now returns **all** nodes in the result set and not just html nodes. Consider this example:

 
```
const HelpLink = ({ text, ...rest }) => <a {...rest}>{text}</a>;

const HelpLinkContainer = ({ text, ...rest }) => (
  <HelpLink text={text} {...rest} />
);

const wrapper = mount(<HelpLinkContainer aria-expanded="true" text="foo" />);

```
 In enzyme v3, the expression `wrapper.find("[aria-expanded=true]").length)` will return 3 and not 1 as in previous versions. A closer look using [`debug`](../api/reactwrapper/debug) reveals:

 
```
// console.log(wrapper.find('[aria-expanded="true"]').debug());

<HelpLinkContainer aria-expanded={true} text="foo">
  <HelpLink text="foo" aria-expanded="true">
    <a aria-expanded="true">
      foo
    </a>
  </HelpLink>
</HelpLinkContainer>

<HelpLink text="foo" aria-expanded="true">
  <a aria-expanded="true">
    foo
  </a>
</HelpLink>

<a aria-expanded="true">
  foo
</a>

```
 To return only the html nodes use the [`hostNodes()`](../api/reactwrapper/hostnodes) function.

 `wrapper.find("[aria-expanded=true]").hostNodes().debug()` will now return:

 
```
<a aria-expanded="true">foo</a>;

```
 
Node Equality now ignores `undefined` values
---------------------------------------------

 We have updated enzyme to consider node "equality" in a semantically identical way to how react treats nodes. More specifically, we've updated enzyme's algorithms to treat `undefined` props as equivalent to the absence of a prop. Consider the following example:

 
```
class Foo extends React.Component {
  render() {
    const { foo, bar } = this.props;
    return <div className={foo} id={bar} />;
  }
}

```
 With this component, the behavior in enzyme v2.x the behavior would have been like:

 
```
const wrapper = shallow(<Foo />);
wrapper.equals(<div />); // => false
wrapper.equals(<div className={undefined} id={undefined} />); // => true

```
 With enzyme v3, the behavior is now as follows:

 
```
const wrapper = shallow(<Foo />);
wrapper.equals(<div />); // => true
wrapper.equals(<div className={undefined} id={undefined} />); // => true

```
 
Lifecycle methods
------------------

 enzyme v2.x had an optional flag that could be passed in to all `shallow` calls which would make it so that more of the component's lifecycle methods were called (such as `componentDidMount` and `componentDidUpdate`).

 With enzyme v3, we have now turned on this mode by default, instead of making it opt-in. It is now possible to *opt-out* instead. Additionally, you can now opt-out at a global level.

 If you'd like to opt out globally, you can run the following:

 
```
import Enzyme from 'enzyme';

Enzyme.configure({ disableLifecycleMethods: true });

```
 This will default enzyme back to the previous behavior globally. If instead you'd only like to opt enzyme to the previous behavior for a specific test, you can do the following:

 
```
import { shallow } from 'enzyme';

// ...

const wrapper = shallow(<Component />, { disableLifecycleMethods: true });

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/migration-from-2-to-3.html>

Using enzyme with Browserify
============================

 If you are using a test runner that runs code in a browser-based environment, you may be using [browserify](http://browserify.org/) in order to bundle your React code.

 Prior to enzyme 3.0 there were some issues with conditional requires that were used to maintain backwards compatibility with React versions. With enzyme 3.0+, this should no longer be an issue. If it is, please file a GitHub issue or make a PR to this documentation with instructions on how to set it up.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/browserify.html>

Using enzyme with SystemJS
==========================

 If you are using a test runner that runs code in a browser-based environment, you may be using [SystemJS](systemjs) in order to bundle your React code.

 Prior to enzyme 3.0 there were some issues with conditional requires that were used to maintain backwards compatibility with React versions. With enzyme 3.0+, this should no longer be an issue. If it is, please file a GitHub issue or make a PR to this documentation with instructions on how to set it up.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/systemjs.html>

Using enzyme with JSDOM
=======================

 [JSDOM](https://github.com/tmpvar/jsdom) is a JavaScript based headless browser that can be used to create a realistic testing environment.

 Since enzyme's [`mount`](../api/mount) API requires a DOM, JSDOM is required in order to use `mount` if you are not already in a browser environment (ie, a Node environment).

 For the best experience with enzyme, it is recommended that you load a document into the global scope *before* requiring React for the first time. It is very important that the below script gets run *before* React's code is run.

 As a result, a standalone script like the one below is generally a good approach:

 `jsdom v10~`:

 
```
/* setup.js */

const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
global.requestAnimationFrame = function (callback) {
  return setTimeout(callback, 0);
};
global.cancelAnimationFrame = function (id) {
  clearTimeout(id);
};
copyProps(window, global);

```
 Here is the sample of [jsdom old API](https://github.com/tmpvar/jsdom/blob/master/lib/old-api.md) as well.

 `jsdom ~<v10`:

 
```
/* setup.js */

const { jsdom } = require('jsdom');

global.document = jsdom('');
global.window = document.defaultView;
global.navigator = {
  userAgent: 'node.js',
};

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter((prop) => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}
copyProps(document.defaultView, global);

```
 
`describeWithDOM` API and clearing the document after every test
-----------------------------------------------------------------

 In previous versions of enzyme, there was a public `describeWithDOM` API which loaded in a new JSDOM document into the global namespace before every test, ensuring that tests were deterministic and did not have side-effects.

 This approach is no longer recommended. React's source code makes several assumptions about the environment it is running in, and one of them is that the `global.document` that is found at "require time" is going to be the one and only document it ever needs to worry about. As a result, this type of "reloading" ends up causing more pain than it prevents.

 It is important, however, to make sure that your tests using the global DOM APIs do not have leaky side-effects which could change the results of other tests. Until there is a better option, this is left to you to ensure.

 
JSDOM + Mocha
--------------

 When testing with JSDOM, the `setup.js` file above needs to be run before the test suite runs. If you are using mocha, this can be done from the command line using the `--require` option:

 
```
mocha --require setup.js --recursive path/to/test/dir

```
 
Node.js Compatibility
----------------------

 Jsdom requires node 4 or above. As a result, if you want to use it with `mount`, you will need to make sure node 4 or iojs is on your machine. If you are stuck using an older version of Node, you may want to try using a browser-based test runner such as [Karma](karma).

 ### 
Switching between node versions

 Some times you may need to switch between different versions of node, you can use a CLI tool called `nvm` to quickly switch between node versions.

 To install `nvm`, use the curl script from <http://nvm.sh>, and then:

 
```
nvm install 4

```
 Now your machine will be running Node 4. You can use the `nvm use` command to switch between the two environments:

 
```
nvm use 0.12

```
 
```
nvm use 4

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/jsdom.html>

Using enzyme with Jest
======================

 
Configure with Jest
--------------------

 To run the setup file to configure Enzyme and the Adapter (as shown in the [Installation docs](https://airbnb.io/enzyme/docs/installation/)) with Jest, set `setupFilesAfterEnv` (previously `setupTestFrameworkScriptFile`) in your config file (check [Jest's documentation](http://jestjs.io/docs/en/configuration) for the possible locations of that config file) to literally the string `<rootDir>` and the path to your setup file.

 
```
{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>src/setupTests.js"]
  }
}

```
 
Jest version 15 and up
-----------------------

 Starting with version 15, Jest [no longer mocks modules by default](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html). Because of this, you no longer have to add *any* special configuration for Jest to use it with enzyme.

 Install Jest, and its Babel integrations, as recommended in the [Jest docs](https://facebook.github.io/jest/docs/en/getting-started.html). Install enzyme. Then, simply require/import React, enzyme functions, and your module at the top of a test file.

 
```
import React from 'react';
import { shallow, mount, render } from 'enzyme';

import Foo from '../Foo';

```
 You do **not** need to include Jest's own renderer, unless you want to use it *only* for Jest snapshot testing.

 
Example Project for Jest version 15+
-------------------------------------

 * [Example test for Jest 15+](https://github.com/vjwilson/enzyme-example-jest)

 
Jest prior to version 15
-------------------------

 If you are using Jest 0.9 – 14.0 with enzyme and using Jest's automocking feature, you will need to mark react and enzyme to be unmocked in your `package.json`:

 `package.json`:

 
```
{
  "jest": {
    "unmockedModulePathPatterns": [
      "node_modules/react/",
      "node_modules/enzyme/"
    ]
  }
}

```
 If you are using a previous version of Jest together with npm3, you may need to unmock [more modules](https://github.com/enzymejs/enzyme/blob/78febd90fe2fb184771b8b0356b0fcffbdad386e/docs/guides/jest.md).



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/jest.html>

Using enzyme with Karma
=======================

 Karma is a popular test runner that can run tests in multiple browser environments. Depending on your Karma setup, you may have a number of options for configuring Enzyme.

 
Basic Enzyme setup with Karma
------------------------------

 ### 
Configure Enzyme

 Create an Enzyme setup file. This file will configure Enzyme with the appropriate React adapter. It can also be used to initialize any that you'd like available for all tests. To avoid having to import this file and Enzyme, you can re-export all Enzyme exports from this file and just import it.

 
```
/* test/enzyme.js */
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import jasmineEnzyme from 'jasmine-enzyme';

// Configure Enzyme for the appropriate React adapter
Enzyme.configure({ adapter: new Adapter() });

// Initialize global helpers
beforeEach(() => {
  jasmineEnzyme();
});

// Re-export all enzyme exports
export * from 'enzyme';

```
 ### 
Import Enzyme from the Enzyme setup file

 Anywhere you want to use Enzyme, import the Enzyme setup file just as you would Enzyme itself.

 
```
/* some_test.js */
// Import anything you would normally import `from 'enzyme'` from the Enzyme setup file
import { shallow } from './test/enzyme';

// ...

```
 
Alternative karma-webpack setup
--------------------------------

 If you're using Karma and Webpack using [karma-webpack's alternative setup](https://github.com/webpack-contrib/karma-webpack#alternative-usage), you can configure enzyme in your test entry file and import Enzyme directly in individual tests.

 
```
/* test/index_test.js */
import './enzyme';

const testsContext = require.context('.', true, /_test$/);

testsContext.keys().forEach(testsContext);

```
 
```
/* some_test.js */
// If Enzyme is configured in the test entry file, Enzyme can be imported directly
import { shallow } from 'enzyme';

// ...

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/karma.html>

Using enzyme with Mocha
=======================

 enzyme was originally designed to work with Mocha, so getting it up and running with Mocha should be no problem at all. Simply install it and start using it:

 
```
npm i --save-dev enzyme

```
 
```
import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import { spy } from 'sinon';
import Foo from './src/Foo';

spy(Foo.prototype, 'componentDidMount');

describe('<Foo />', () => {
  it('calls componentDidMount', () => {
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
  });
});

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/mocha.html>

Using enzyme to Test Components in React Native
===============================================

 As of v0.18, React Native uses React as a dependency rather than a forked version of the library, which means it is now possible to use enzyme's `shallow` with React Native components.

 Unfortunately, React Native has many environmental dependencies that can be hard to simulate without a host device.

 This can be difficult when you want your test suite to run with typical Continuous Integration servers such as Travis.

 To use enzyme to test React Native, you currently need to configure an adapter, and load an emulated DOM.

 
Configuring an Adapter
-----------------------

 While a React Native adapter is [in discussion](https://github.com/enzymejs/enzyme/issues/1436), a standard adapter may be used, such as 'enzyme-adapter-react-16':

 
```
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

```
 
Loading an emulated DOM with JSDOM
-----------------------------------

 To use enzyme's `mount` until a React Native adapter exists, an emulated DOM must be loaded.

 While some have had success with [react-native-mock-renderer](https://github.com/Root-App/react-native-mock-render), the recommended approach is to use [https://github.com/tmpvar/jsdom](jsdom), as documented for enzyme at the [JSDOM](https://airbnb.io/enzyme/docs/guides/jsdom.html) documentation page.

 JSDOM will allow all of the `enzyme` behavior you would expect. While Jest snapshot testing can be used with this approach as well, it isn't encouraged and is only supported through `wrapper.debug()`.

 
Using enzyme's find when lacking className props
-------------------------------------------------

 It is worth noting that React Native allows for a [testID](https://facebook.github.io/react-native/docs/view#testid) prop, that can be used a selector similar to `className` in standard React:

 
```
    <View key={key} style={styles.todo} testID="todo-item">
      <Text testID="todo-title" style={styles.title}>{todo.title}</Text>
    </View>

```
 
```
expect(wrapper.findWhere((node) => node.prop('testID') === 'todo-item')).toExist();

```
 
Default example configuration for Jest and JSDOM replacement
-------------------------------------------------------------

 To perform the necessary configuration in your testing framework, it is recommended to use a setup script, such as with Jest's `setupFilesAfterEnv` setting.

 Create or update a `jest.config.js` file at the root of your project to include the `setupFilesAfterEnv` setting:

 
```
// jest.config.js

module.exports = {
  // Load setup-tests.js before test execution
  setupFilesAfterEnv: '<rootDir>setup-tests.js',

  // ...
};

```
 Then create or update the file specified in `setupFilesAfterEnv`, in this case `setup-tests.js` in the project root:

 
```
// setup-tests.js

import 'react-native';
import 'jest-enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme from 'enzyme';

/**
 * Set up DOM in node.js environment for Enzyme to mount to
 */
const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  Object.defineProperties(target, {
    ...Object.getOwnPropertyDescriptors(src),
    ...Object.getOwnPropertyDescriptors(target),
  });
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

/**
 * Set up Enzyme to mount to DOM, simulate events,
 * and inspect the DOM in tests.
 */
Enzyme.configure({ adapter: new Adapter() });

```
 
Configure enzyme with other test libraries and include JSDOM on the fly
------------------------------------------------------------------------

 Update the file specified in `setupFilesAfterEnv`, in this case `setup-tests.js` in the project root:

 
```
import 'react-native';
import 'jest-enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme from 'enzyme';

/**
 * Set up Enzyme to mount to DOM, simulate events,
 * and inspect the DOM in tests.
 */
Enzyme.configure({ adapter: new Adapter() });

```
 ### 
Create a separate test file

 Create a file prefixed with enzyme.test.ts for example `component.enzyme.test.js`:

 
```
/**
 * @jest-environment jsdom
 */
import React from 'react';
import { mount } from 'enzyme';
import { Text } from '../../../component/text';

describe('Component tested with airbnb enzyme', () => {
  test('App mount with enzyme', () => {
    const wrapper = mount(<Text />);
    // other tests operations
  });
});

```
 **The most important part is to ensure that the test runs with the `jestEnvironment` set to `jsdom`** - one way is to include a `/* @jest-environment jsdom */` comment at the top of the file.

 Then you should then be able to start writing tests!

 Note that you may want to perform some additional mocking around native components, or if you want to perform snapshot testing against React Native components. Notice how you may need to mock React Navigation's `KeyGenerator` in this case, to avoid random React keys that will cause snapshots to always fail.

 
```
import React from 'react';
import renderer from 'react-test-renderer';
import { mount, ReactWrapper } from 'enzyme';
import { Provider } from 'mobx-react';
import { Text } from 'native-base';

import { TodoItem } from './todo-item';
import { TodoList } from './todo-list';
import { todoStore } from '../../stores/todo-store';

// https://github.com/react-navigation/react-navigation/issues/2269
// React Navigation generates random React keys, which makes
// snapshot testing fail. Mock the randomness to keep from failing.
jest.mock('react-navigation/src/routers/KeyGenerator', () => ({
  generateKey: jest.fn(() => 123),
}));

describe('todo-list', () => {
  describe('enzyme tests', () => {
    it('can add a Todo with Enzyme', () => {
      const wrapper = mount(
        <Provider keyLength={0} todoStore={todoStore}>
          <TodoList />
        </Provider>,
      );

      const newTodoText = 'I need to do something...';
      const newTodoTextInput = wrapper.find('Input').first();
      const addTodoButton = wrapper
        .find('Button')
        .findWhere((w) => w.text() === 'Add Todo')
        .first();

      newTodoTextInput.props().onChangeText(newTodoText);

      // Enzyme usually allows wrapper.simulate() alternatively, but this doesn't support 'press' events.
      addTodoButton.props().onPress();

      // Make sure to call update if external events (e.g. Mobx state changes)
      // result in updating the component props.
      wrapper.update();

      // You can either check for a testID prop, similar to className in React:
      expect(
        wrapper.findWhere((node) => node.prop('testID') === 'todo-item'),
      ).toExist();

      // Or even just find a component itself, if you broke the JSX out into its own component:
      expect(wrapper.find(TodoItem)).toExist();

      // You can even do snapshot testing,
      // if you pull in enzyme-to-json and configure
      // it in snapshotSerializers in package.json
      expect(wrapper.find(TodoList)).toMatchSnapshot();
    });
  });
});

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/react-native.html>

Using enzyme with Lab and Code
==============================

 [Lab](https://github.com/hapijs/lab) is a simple test utility for node & part of the [Hapi.js](https://github.com/hapijs/hapi) framework universe. Lab's initial code borrowed heavily from [Mocha](https://github.com/mochajs/mocha). [Code](https://github.com/hapijs/code) is Lab's standard assertion library and was created as a direct rewrite of [Chai](https://github.com/chaijs).

 Example Test: enzyme + Lab + Code
=================================

 
```
import { shallow, mount, render } from 'enzyme';
import React from 'react';

const Code = require('code');
const Lab = require('lab');

const lab = Lab.script();
exports.lab = lab;

lab.suite('A suite', () => {
  lab.test('calls componentDidMount', (done) => {
    const wrapper = mount(<Foo />);
    Code.expect(Foo.prototype.componentDidMount.callCount).to.equal(1);
    done();
  });
});

```
 
Example Projects
-----------------

 * [enzyme-example-lab](https://github.com/gattermeier/enzyme-example-lab)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/lab.html>

Installation
============

 enzyme should be installed using npm:

 
```
npm i --save-dev enzyme

```
 enzyme can be used with your test runner of choice. All examples in the documentation will be provided using [mocha](https://mochajs.org/) and [BDD style chai](http://chaijs.com/api/bdd/), although neither library is a dependency of enzyme.

 Working with React 16
=====================

 If you are wanting to use enzyme with React 16, but don't already have React 16 and react-dom installed, you should do so:

 
```
npm i --save react@16 react-dom@16

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-16

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-16');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```
 Working with React 15
=====================

 If you are wanting to use Enzyme with React 15, but don't already have React 15 and react-dom installed, you should do so:

 
```
npm i --save react@15 react-dom@15

```
 Further, enzyme requires the test utilities addon be installed:

 
```
npm i --save-dev react-test-renderer@15

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-15

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-15');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```
 Working with React 0.14
=======================

 If you are wanting to use Enzyme with React 0.14, but don't already have React 0.14 and react-dom installed, you should do so:

 
```
npm i --save react@0.14 react-dom@0.14

```
 Further, enzyme with React 0.14 requires the test utilities addon be installed:

 
```
npm i --save-dev react-addons-test-utils@0.14

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-14

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-14';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-14');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```
 Working with React 0.13
=======================

 If you are wanting to use enzyme with React 0.13, but don't already have React 0.13 installed, you should do so:

 
```
npm i react@0.13 --save

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-13

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-13';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-13');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/installation/>

Working with React 16
=====================

 If you are wanting to use enzyme with React 16, but don't already have React 16 and react-dom installed, you should do so:

 
```
npm i --save react@16 react-dom@16

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-16

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-16');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/installation/react-16.html>

Working with React 15
=====================

 If you are wanting to use Enzyme with React 15, but don't already have React 15 and react-dom installed, you should do so:

 
```
npm i --save react@15 react-dom@15

```
 Further, enzyme requires the test utilities addon be installed:

 
```
npm i --save-dev react-test-renderer@15

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-15

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-15');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/installation/react-15.html>

Working with React 0.14
=======================

 If you are wanting to use Enzyme with React 0.14, but don't already have React 0.14 and react-dom installed, you should do so:

 
```
npm i --save react@0.14 react-dom@0.14

```
 Further, enzyme with React 0.14 requires the test utilities addon be installed:

 
```
npm i --save-dev react-addons-test-utils@0.14

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-14

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-14';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-14');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/installation/react-014.html>

.childAt(index) => ShallowWrapper
=================================

 Returns a new wrapper with child at the specified index.

 
Arguments
----------

 1. `index` (`number`): A zero-based integer indicating which node to retrieve.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the resulting node.

 
Examples
---------

 
```
const wrapper = shallow(<ToDoList items={items} />);
expect(wrapper.find('ul').childAt(0).type()).to.equal('li');

```
 
Related Methods
----------------

 * [`.parents([selector]) => ShallowWrapper`](parents)
* [`.parent() => ShallowWrapper`](parent)
* [`.closest(selector) => ShallowWrapper`](closest)
* [`.children([selector]) => ShallowWrapper`](children)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/childAt.html>

.children([selector]) => ShallowWrapper
=======================================

 Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector can be provided and it will filter the children by this selector

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector) [optional]): A selector to filter the children by.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the resulting nodes.

 
Examples
---------

 
```
const wrapper = shallow(<ToDoList items={items} />);
expect(wrapper.find('ul').children()).to.have.lengthOf(items.length);

```
 
Related Methods
----------------

 * [`.parents([selector]) => ShallowWrapper`](parents)
* [`.parent() => ShallowWrapper`](parent)
* [`.closest(selector) => ShallowWrapper`](closest)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/children.html>

Using enzyme with Webpack
=========================

 If you are using a test runner that runs code in a browser-based environment, you may be using [webpack](https://webpack.js.org/) in order to bundle your React code.

 Prior to enzyme 3.0 there were some issues with conditional requires that were used to maintain backwards compatibility with React versions. With enzyme 3.0+, this should no longer be an issue. If it is, please file a GitHub issue or make a PR to this documentation with instructions on how to set it up.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/webpack.html>

Using enzyme with Tape and AVA
==============================

 enzyme works well with [Tape](https://github.com/substack/tape) and [AVA](https://github.com/avajs/ava). Simply install it and start using it:

 
```
npm i --save-dev enzyme enzyme-adapter-react-16

```
 
Tape
-----

 
```
import test from 'tape';
import React from 'react';
import { shallow, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Foo from '../path/to/foo';

configure({ adapter: new Adapter() });

test('shallow', (t) => {
  const wrapper = shallow(<Foo />);
  t.equal(wrapper.contains(<span>Foo</span>), true);
});

test('mount', (t) => {
  const wrapper = mount(<Foo />);
  const fooInner = wrapper.find('.foo-inner');
  t.equal(fooInner.is('.foo-inner'), true);
});

```
 
AVA
----

 
```
import test from 'ava';
import React from 'react';
import { shallow, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import Foo from '../path/to/foo';

configure({ adapter: new Adapter() });

test('shallow', (t) => {
  const wrapper = shallow(<Foo />);
  t.is(wrapper.contains(<span>Foo</span>), true);
});

test('mount', (t) => {
  const wrapper = mount(<Foo />);
  const fooInner = wrapper.find('.foo-inner');
  t.is(fooInner.is('.foo-inner'), true);
});

```
 
Example Projects
-----------------

 * [enzyme-example-tape](https://github.com/TaeKimJR/enzyme-example-tape)
* [enzyme-example-ava](https://github.com/mikenikles/enzyme-example-ava)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/guides/tape-ava.html>

Working with React 0.13
=======================

 If you are wanting to use enzyme with React 0.13, but don't already have React 0.13 installed, you should do so:

 
```
npm i react@0.13 --save

```
 Next, to get started with enzyme, you can simply install it with npm:

 
```
npm i --save-dev enzyme enzyme-adapter-react-13

```
 And then you're ready to go! In your test files you can simply `require` or `import` enzyme:

 ES6:

 
```
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-13';

configure({ adapter: new Adapter() });

```
 
```
// test file
import { shallow, mount, render } from 'enzyme';

const wrapper = shallow(<Foo />);

```
 ES5: 

 
```
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-13');

enzyme.configure({ adapter: new Adapter() });

```
 
```
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.shallow(<Foo />);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/installation/react-013.html>

Shallow Rendering API
=====================

 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.

 As of Enzyme v3, the `shallow` API does call React lifecycle methods such as `componentDidMount` and `componentDidUpdate`. You can read more about this in the [version 3 migration guide](../guides/migration-from-2-to-3#lifecycle-methods).

 
```
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

```
 
`shallow(node[, options]) => ShallowWrapper`
---------------------------------------------

 
Arguments
----------

 1. `node` (`ReactElement`): The node to render
2. `options` (`Object` [optional]):
	* `options.context`: (`Object` [optional]): Context to be passed into the component
	* `options.disableLifecycleMethods`: (`Boolean` [optional]): If set to true, `componentDidMount` is not called on the component, and `componentDidUpdate` is not called after [`setProps`](shallowwrapper/setprops) and [`setContext`](shallowwrapper/setcontext). Default to `false`.
	* `options.wrappingComponent`: (`ComponentType` [optional]): A component that will render as a parent of the `node`. It can be used to provide context to the `node`, among other things. See the [`getWrappingComponent()` docs](shallowwrapper/getwrappingcomponent) for an example. **Note**: `wrappingComponent` *must* render its children.
	* `options.wrappingComponentProps`: (`Object` [optional]): Initial props to pass to the `wrappingComponent` if it is specified.
	* `options.suspenseFallback`: (`Boolean` [optional]): If set to true, when rendering `Suspense` enzyme will replace all the lazy components in children with `fallback` element prop. Otherwise it won't handle fallback of lazy component. Default to `true`. Note: not supported in React < 16.6.

 
Returns
--------

 `ShallowWrapper`: The wrapper instance around the rendered output.

 
ShallowWrapper API
-------------------

 
[`.find(selector) => ShallowWrapper`](shallowwrapper/find)
-----------------------------------------------------------

 Find every node in the render tree that matches the provided selector.

 
[`.findWhere(predicate) => ShallowWrapper`](shallowwrapper/findwhere)
----------------------------------------------------------------------

 Find every node in the render tree that returns true for the provided predicate function.

 
[`.filter(selector) => ShallowWrapper`](shallowwrapper/filter)
---------------------------------------------------------------

 Remove nodes in the current wrapper that do not match the provided selector.

 
[`.filterWhere(predicate) => ShallowWrapper`](shallowwrapper/filterwhere)
--------------------------------------------------------------------------

 Remove nodes in the current wrapper that do not return true for the provided predicate function.

 
[`.hostNodes() => ShallowWrapper`](shallowwrapper/hostnodes)
-------------------------------------------------------------

 Removes nodes that are not host nodes; e.g., this will only return HTML nodes.

 
[`.contains(nodeOrNodes) => Boolean`](shallowwrapper/contains)
---------------------------------------------------------------

 Returns whether or not a given node or array of nodes is somewhere in the render tree.

 
[`.containsMatchingElement(node) => Boolean`](shallowwrapper/containsmatchingelement)
--------------------------------------------------------------------------------------

 Returns whether or not a given react element exists in the shallow render tree.

 
[`.containsAllMatchingElements(nodes) => Boolean`](shallowwrapper/containsallmatchingelements)
-----------------------------------------------------------------------------------------------

 Returns whether or not all the given react elements exist in the shallow render tree.

 
[`.containsAnyMatchingElements(nodes) => Boolean`](shallowwrapper/containsanymatchingelements)
-----------------------------------------------------------------------------------------------

 Returns whether or not one of the given react elements exists in the shallow render tree.

 
[`.equals(node) => Boolean`](shallowwrapper/equals)
----------------------------------------------------

 Returns whether or not the current render tree is equal to the given node, based on the expected value.

 
[`.matchesElement(node) => Boolean`](shallowwrapper/matcheselement)
--------------------------------------------------------------------

 Returns whether or not a given react element matches the shallow render tree.

 
[`.hasClass(className) => Boolean`](shallowwrapper/hasclass)
-------------------------------------------------------------

 Returns whether or not the current node has the given class name or not.

 
[`.is(selector) => Boolean`](shallowwrapper/is)
------------------------------------------------

 Returns whether or not the current node matches a provided selector.

 
[`.exists([selector]) => Boolean`](shallowwrapper/exists)
----------------------------------------------------------

 Returns whether or not the current node exists, or, if given a selector, whether that selector has any matching results.

 
[`.isEmpty() => Boolean`](shallowwrapper/isempty)
--------------------------------------------------

 *Deprecated*: Use [`.exists()`](shallowwrapper/exists) instead.

 
[`.isEmptyRender() => Boolean`](shallowwrapper/isemptyrender)
--------------------------------------------------------------

 Returns whether or not the current component returns a falsy value.

 
[`.not(selector) => ShallowWrapper`](shallowwrapper/not)
---------------------------------------------------------

 Remove nodes in the current wrapper that match the provided selector. (inverse of `.filter()`)

 
[`.children([selector]) => ShallowWrapper`](shallowwrapper/children)
---------------------------------------------------------------------

 Get a wrapper with all of the children nodes of the current wrapper.

 
[`.childAt(index) => ShallowWrapper`](shallowwrapper/childat)
--------------------------------------------------------------

 Returns a new wrapper with child at the specified index.

 
[`.parents([selector]) => ShallowWrapper`](shallowwrapper/parents)
-------------------------------------------------------------------

 Get a wrapper with all of the parents (ancestors) of the current node.

 
[`.parent() => ShallowWrapper`](shallowwrapper/parent)
-------------------------------------------------------

 Get a wrapper with the direct parent of the current node.

 
[`.closest(selector) => ShallowWrapper`](shallowwrapper/closest)
-----------------------------------------------------------------

 Get a wrapper with the first ancestor of the current node to match the provided selector.

 
[`.shallow([options]) => ShallowWrapper`](shallowwrapper/shallow)
------------------------------------------------------------------

 Shallow renders the current node and returns a shallow wrapper around it.

 
[`.render() => CheerioWrapper`](shallowwrapper/render)
-------------------------------------------------------

 Returns a CheerioWrapper of the current node's subtree.

 
[`.renderProp(key)() => ShallowWrapper`](shallowwrapper/renderprop)
--------------------------------------------------------------------

 Returns a wrapper of the node rendered by the provided render prop.

 
[`.unmount() => ShallowWrapper`](shallowwrapper/unmount)
---------------------------------------------------------

 A method that un-mounts the component.

 
[`.text() => String`](shallowwrapper/text)
-------------------------------------------

 Returns a string representation of the text nodes in the current render tree.

 
[`.html() => String`](shallowwrapper/html)
-------------------------------------------

 Returns a static HTML rendering of the current node.

 
[`.get(index) => ReactElement`](shallowwrapper/get)
----------------------------------------------------

 Returns the node at the provided index of the current wrapper.

 
[`.getElement() => ReactElement`](shallowwrapper/getelement)
-------------------------------------------------------------

 Returns the wrapped ReactElement.

 
[`.getElements() => Array<ReactElement>`](shallowwrapper/getelements)
----------------------------------------------------------------------

 Returns the wrapped ReactElements.

 
[`.at(index) => ShallowWrapper`](shallowwrapper/at)
----------------------------------------------------

 Returns a wrapper of the node at the provided index of the current wrapper.

 
[`.first() => ShallowWrapper`](shallowwrapper/first)
-----------------------------------------------------

 Returns a wrapper of the first node of the current wrapper.

 
[`.last() => ShallowWrapper`](shallowwrapper/last)
---------------------------------------------------

 Returns a wrapper of the last node of the current wrapper.

 
[`.state([key]) => Any`](shallowwrapper/state)
-----------------------------------------------

 Returns the state of the root component.

 
[`.context([key]) => Any`](shallowwrapper/context)
---------------------------------------------------

 Returns the context of the root component.

 
[`.props() => Object`](shallowwrapper/props)
---------------------------------------------

 Returns the props of the current node.

 
[`.prop(key) => Any`](shallowwrapper/prop)
-------------------------------------------

 Returns the named prop of the current node.

 
[`.key() => String`](shallowwrapper/key)
-----------------------------------------

 Returns the key of the current node.

 
[`.invoke(propName)(...args) => Any`](shallowwrapper/invoke)
-------------------------------------------------------------

 Invokes a prop function on the current node and returns the function's return value.

 
[`.simulate(event[, data]) => ShallowWrapper`](shallowwrapper/simulate)
------------------------------------------------------------------------

 Simulates an event on the current node.

 
[`.setState(nextState) => ShallowWrapper`](shallowwrapper/setstate)
--------------------------------------------------------------------

 Manually sets state of the root component.

 
[`.setProps(nextProps[, callback]) => ShallowWrapper`](shallowwrapper/setprops)
--------------------------------------------------------------------------------

 Manually sets props of the root component.

 
[`.setContext(context) => ShallowWrapper`](shallowwrapper/setcontext)
----------------------------------------------------------------------

 Manually sets context of the root component.

 
[`.getWrappingComponent() => ShallowWrapper`](shallowwrapper/getwrappingcomponent)
-----------------------------------------------------------------------------------

 Returns a wrapper representing the `wrappingComponent`, if one was passed.

 
[`.instance() => ReactComponent`](shallowwrapper/instance)
-----------------------------------------------------------

 Returns the instance of the root component.

 
[`.update() => ShallowWrapper`](shallowwrapper/update)
-------------------------------------------------------

 Syncs the enzyme component tree snapshot with the react component tree.

 
[`.debug() => String`](shallowwrapper/debug)
---------------------------------------------

 Returns a string representation of the current shallow render tree for debugging purposes.

 
[`.type() => String|Function|null`](shallowwrapper/type)
---------------------------------------------------------

 Returns the type of the current node of the wrapper.

 
[`.name() => String`](shallowwrapper/name)
-------------------------------------------

 Returns the name of the current node of the wrapper.

 
[`.forEach(fn) => ShallowWrapper`](shallowwrapper/foreach)
-----------------------------------------------------------

 Iterates through each node of the current wrapper and executes the provided function

 
[`.map(fn) => Array`](shallowwrapper/map)
------------------------------------------

 Maps the current array of nodes to another array.

 
[`.reduce(fn[, initialValue]) => Any`](shallowwrapper/reduce)
--------------------------------------------------------------

 Reduces the current array of nodes to a value

 
[`.reduceRight(fn[, initialValue]) => Any`](shallowwrapper/reduceright)
------------------------------------------------------------------------

 Reduces the current array of nodes to a value, from right to left.

 
[`.slice([begin[, end]]) => ShallowWrapper`](shallowwrapper/slice)
-------------------------------------------------------------------

 Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.

 
[`.tap(intercepter) => Self`](shallowwrapper/tap)
--------------------------------------------------

 Taps into the wrapper method chain. Helpful for debugging.

 
[`.some(selector) => Boolean`](shallowwrapper/some)
----------------------------------------------------

 Returns whether or not any of the nodes in the wrapper match the provided selector.

 
[`.someWhere(predicate) => Boolean`](shallowwrapper/somewhere)
---------------------------------------------------------------

 Returns whether or not any of the nodes in the wrapper pass the provided predicate function.

 
[`.every(selector) => Boolean`](shallowwrapper/every)
------------------------------------------------------

 Returns whether or not all of the nodes in the wrapper match the provided selector.

 
[`.everyWhere(predicate) => Boolean`](shallowwrapper/everywhere)
-----------------------------------------------------------------

 Returns whether or not all of the nodes in the wrapper pass the provided predicate function.

 
[`.dive([options]) => ShallowWrapper`](shallowwrapper/dive)
------------------------------------------------------------

 Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/shallow.html>

.at(index) => ShallowWrapper
============================

 Returns a wrapper around the node at a given index of the current wrapper.

 
Arguments
----------

 1. `index` (`Number`): A zero-based integer indicating which node to retrieve.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the retrieved node.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo).at(0).props().foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.get(index) => ReactElement`](get) - same, but returns the React node itself, with no wrapper.
* [`.first() => ShallowWrapper`](first) - same as at(0)
* [`.last() => ShallowWrapper`](last)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/at.html>

.closest(selector) => ShallowWrapper
====================================

 Returns a wrapper of the first element that matches the selector by traversing up through the wrapped node's ancestors in the tree, starting with itself. It must be a single-node wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the resulting node.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo).closest('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.children([selector]) => ShallowWrapper`](children)
* [`.parent() => ShallowWrapper`](parent)
* [`.parents([selector]) => ShallowWrapper`](parents)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/closest.html>

.contains(nodeOrNodes) => Boolean
=================================

 Returns whether or not all given react elements match elements in the render tree. It will determine if an element in the wrapper matches the expected element by checking if the expected element has the same props as the wrapper's element and share the same values.

 
Arguments
----------

 1. `nodeOrNodes` (`ReactElement|Array<ReactElement>`): The node or array of nodes whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has nodes anywhere in its render tree that match the ones passed in.

 
Example
--------

 
```
const wrapper = shallow((
  <div>
    <div data-foo="foo" data-bar="bar">Hello</div>
  </div>
));

expect(wrapper.contains(<div data-foo="foo" data-bar="bar">Hello</div>)).to.equal(true);

expect(wrapper.contains(<div data-foo="foo">Hello</div>)).to.equal(false);
expect(wrapper.contains(<div data-foo="foo" data-bar="bar" data-baz="baz">Hello</div>)).to.equal(false);
expect(wrapper.contains(<div data-foo="foo" data-bar="Hello">Hello</div>)).to.equal(false);
expect(wrapper.contains(<div data-foo="foo" data-bar="bar" />)).to.equal(false);

```
 
```
const wrapper = shallow((
  <div>
    <span>Hello</span>
    <div>Goodbye</div>
    <span>Again</span>
  </div>
));

expect(wrapper.contains([
  <span>Hello</span>,
  <div>Goodbye</div>,
])).to.equal(true);

expect(wrapper.contains([
  <span>Hello</span>,
  <div>World</div>,
])).to.equal(false);

```
 
```
const calculatedValue = 2 + 2;

const wrapper = shallow((
  <div>
    <div data-foo="foo" data-bar="bar">{calculatedValue}</div>
  </div>
));

expect(wrapper.contains(<div data-foo="foo" data-bar="bar">{4}</div>)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.contains()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/contains.html>

.containsAllMatchingElements(patternNodes) => Boolean
=====================================================

 Returns whether or not all of the given react elements in `patternNodes` match an element in the wrapper's render tree. Every single element of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.

 
Arguments
----------

 1. `patternNodes` (`Array<ReactElement>`): The array of nodes whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has nodes anywhere in its render tree that looks like the nodes passed in.

 
Example
--------

 
```
const style = { fontSize: 13 };
const wrapper = shallow((
  <div>
    <span className="foo">Hello</span>
    <div style={style}>Goodbye</div>
    <span>Again</span>
  </div>
));

expect(wrapper.containsAllMatchingElements([
  <span>Hello</span>,
  <div>Goodbye</div>,
])).to.equal(true);

```
 
Common Gotchas
---------------

 * `.containsAllMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with an array of ReactElement or a JSX expression.
* Keep in mind that this method determines matching based on the matching of the node's children as well.

 
Related Methods
----------------

 * [`.matchesElement() => ShallowWrapper`](matcheselement) - rules for matching each node
* [`.containsMatchingElement() => ShallowWrapper`](containsmatchingelement) - rules for matching whole wrapper
* [`.containsAnyMatchingElements() => ShallowWrapper`](containsanymatchingelements) - must match at least one in patternNodes



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/containsAllMatchingElements.html>

.containsAnyMatchingElements(patternNodes) => Boolean
=====================================================

 Returns whether or not at least one of the given react elements in `patternNodes` matches an element in the wrapper's render tree. One or more elements of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.

 
Arguments
----------

 1. `patternNodes` (`Array<ReactElement>`): The array of nodes whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has a node anywhere in its render tree that looks like one of the array passed in.

 
Example
--------

 
```
const style = { fontSize: 13 };
const wrapper = shallow((
  <div>
    <span className="foo">Hello</span>
    <div style={style}>Goodbye</div>
    <span>Again</span>
  </div>
));

expect(wrapper.containsAnyMatchingElements([
  <span>Bonjour</span>,
  <div>Goodbye</div>,
])).to.equal(true);

```
 
Common Gotchas
---------------

 * `.containsAnyMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with an array ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.

 
Related Methods
----------------

 * [`.matchesElement() => ShallowWrapper`](matcheselement) - rules for matching each node
* [`.containsMatchingElement() => ShallowWrapper`](containsmatchingelement) - rules for matching whole wrapper
* [`.containsAllMatchingElements() => ShallowWrapper`](containsallmatchingelements) - must match all nodes in patternNodes



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/containsAnyMatchingElements.html>

.containsMatchingElement(patternNode) => Boolean
================================================

 Returns whether or not a `patternNode` react element matches any element in the render tree.

 * the matches can happen anywhere in the wrapper's contents
* the wrapper can contain more than one node; all are searched

 Otherwise, the match follows the same rules as `matchesElement`.

 
Arguments
----------

 1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has a node anywhere in its render tree that matches the one passed in.

 
Example
--------

 
```
const wrapper = shallow((
  <div>
    <div data-foo="foo" data-bar="bar">Hello</div>
  </div>
));

expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="bar">Hello</div>)).to.equal(true);
expect(wrapper.containsMatchingElement(<div data-foo="foo">Hello</div>)).to.equal(true);

expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="bar" data-baz="baz">Hello</div>)).to.equal(false);
expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="Hello">Hello</div>)).to.equal(false);
expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="bar" />)).to.equal(false);

```
 
Common Gotchas
---------------

 * `.containsMatchingElement()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.

 
Related Methods
----------------

 * [`.containsAllMatchingElements() => ShallowWrapper`](containsallmatchingelements) - must match all nodes in patternNodes
* [`.containsAnyMatchingElements() => ShallowWrapper`](containsanymatchingelements) - must match at least one in patternNodes



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/containsMatchingElement.html>

.context([key]) => Any
======================

 Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.

 
Arguments
----------

 1. `key` (`String` [optional]): If provided, the return value will be the `this.context[key]` of the root component instance.

 
Example
--------

 
```
const wrapper = shallow(
  <MyComponent />,
  { context: { foo: 10 } },
);
expect(wrapper.context().foo).to.equal(10);
expect(wrapper.context('foo')).to.equal(10);

```
 
Related Methods
----------------

 * [`.props() => Object`](props)
* [`.prop(key) => Any`](prop)
* [`.state([key]) => Any`](state)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/context.html>

.debug([options]) => String
===========================

 Returns an HTML-like string of the wrapper for debugging purposes. Useful to print out to the console when tests are not passing when you expect them to.

 
Arguments
----------

 `options` (`Object` [optional]):

 * `options.ignoreProps`: (`Boolean` [optional]): Whether props should be omitted in the resulting string. Props are included by default.
* `options.verbose`: (`Boolean` [optional]): Whether arrays and objects passed as props should be verbosely printed.

 
Returns
--------

 `String`: The resulting string.

 
Examples
---------

 
```
function Book({ title, pages }) {
  return (
    <div>
      <h1 className="title">{title}</h1>
      {pages && (
        <NumberOfPages
          pages={pages}
          object={{ a: 1, b: 2 }}
        />
      )}
    </div>
  );
}
Book.propTypes = {
  title: PropTypes.string.isRequired,
  pages: PropTypes.number,
};
Book.defaultProps = {
  pages: null,
};

```
 
```
const wrapper = shallow(<Book title="Huckleberry Finn" />);
console.log(wrapper.debug());

```
 Outputs to console:

 
```
<div>
 <h1 className="title">Huckleberry Finn</h1>
</div>

```
 
```
const wrapper = shallow((
  <Book
    title="Huckleberry Finn"
    pages="633 pages"
  />
));
console.log(wrapper.debug());

```
 Outputs to console:

 
```
<div>
  <h1 className="title">Huckleberry Finn</h1>
  <NumberOfPages pages="633 pages" object={{...}}/>
</div>

```
 
```
const wrapper = shallow((
  <Book
    title="Huckleberry Finn"
    pages="633 pages"
  />
));
console.log(wrapper.debug({ ignoreProps: true }));

```
 Outputs to console:

 
```
<div>
  <h1>Huckleberry Finn</h1>
  <NumberOfPages />
</div>

```
 
```
const wrapper = shallow((
  <Book
    title="Huckleberry Finn"
    pages="633 pages"
  />
));
console.log(wrapper.debug({ verbose: true }));

```
 Outputs to console:

 
```
<div>
  <h1 className="title">Huckleberry Finn</h1>
  <NumberOfPages pages="633 pages" object={{ a: 1, b: 2 }}/>
</div>

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/debug.html>

.dive([options]) => ShallowWrapper
==================================

 Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result. It must be a single-node wrapper, and the node must be a React component.

 There is no corresponding `dive` method for ReactWrappers.

 NOTE: can only be called on a wrapper of a single non-DOM component element node, otherwise it will throw an error. If you have to shallow-wrap a wrapper with multiple child nodes, use [`.shallow()`](shallow).

 
Arguments
----------

 1. `options` (`Object` [optional]):
2. `options.context`: (`Object` [optional]): Context to be passed into the component

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the current node after it's been shallow rendered.

 
Examples
---------

 
```
function Bar() {
  return (
    <div>
      <div className="in-bar" />
    </div>
  );
}

```
 
```
function Foo() {
  return (
    <div>
      <Bar />
    </div>
  );
}

```
 
```
const wrapper = shallow(<Foo />);
expect(wrapper.find('.in-bar')).to.have.lengthOf(0);
expect(wrapper.find(Bar)).to.have.lengthOf(1);
expect(wrapper.find(Bar).dive().find('.in-bar')).to.have.lengthOf(1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/dive.html>

.equals(node) => Boolean
========================

 Returns whether or not the current wrapper root node render tree looks like the one passed in.

 
Arguments
----------

 1. `node` (`ReactElement`): The node whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has a node anywhere in it's render tree that looks like the one passed in.

 
Example
--------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.equals(<div className="foo bar" />)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.equals()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.
* Following React's behavior, `.equals()` ignores properties whose values are `undefined`.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/equals.html>

.every(selector) => Boolean
===========================

 Returns whether or not all of the nodes in the wrapper match the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `Boolean`: True if every node in the current wrapper matched the provided selector.

 
Examples
---------

 
```
const wrapper = shallow((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').every('.foo')).to.equal(true);
expect(wrapper.find('.foo').every('.qoo')).to.equal(false);
expect(wrapper.find('.foo').every('.bar')).to.equal(false);

```
 
Related Methods
----------------

 * [`.someWhere(predicate) => Boolean`](somewhere)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/every.html>

.everyWhere(fn) => Boolean
==========================

 Returns whether or not all of the nodes in the wrapper pass the provided predicate function.

 
Arguments
----------

 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function to match the nodes.

 
Returns
--------

 `Boolean`: True if every node in the current wrapper passed the predicate function.

 
Example
--------

 
```
const wrapper = shallow((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('foo'))).to.equal(true);
expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('qoo'))).to.equal(false);
expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('bar'))).to.equal(false);

```
 
Related Methods
----------------

 * [`.some(selector) => Boolean`](some)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/everyWhere.html>

.exists([selector]) => Boolean
==============================

 Returns whether or not any nodes exist in the wrapper. Or, if a selector is passed in, whether that selector has any matches in the wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector) [optional]): The selector to check existence for.

 
Returns
--------

 `Boolean`: whether or not any nodes are on the list, or the selector had any matches.

 
Example
--------

 
```
const wrapper = mount(<div className="some-class" />);
expect(wrapper.exists('.some-class')).to.equal(true);
expect(wrapper.find('.other-class').exists()).to.equal(false);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/exists.html>

.filter(selector) => ShallowWrapper
===================================

 Returns a new wrapper with only the nodes of the current wrapper that match the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the filtered nodes.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.foo').filter('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.filterWhere(predicate) => ShallowWrapper`](filterwhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/filter.html>

.filterWhere(fn) => ShallowWrapper
==================================

 Returns a new wrapper with only the nodes of the current wrapper that, when passed into the provided predicate function, return true.

 
Arguments
----------

 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function that is passed a wrapped node.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the filtered nodes.

 
Example
--------

 
```
const wrapper = shallow(<MyComponent />);
const complexFoo = wrapper.find('.foo').filterWhere((n) => typeof n.type() !== 'string');
expect(complexFoo).to.have.lengthOf(4);

```
 
Related Methods
----------------

 * [`.filter(selector) => ShallowWrapper`](filter)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/filterWhere.html>

.find(selector) => ShallowWrapper
=================================

 Finds every node in the render tree of the current wrapper that matches the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the found nodes.

 
Examples
---------

 CSS Selectors:

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.foo')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(3);

// compound selector
expect(wrapper.find('div.some-class')).to.have.lengthOf(3);

// CSS id selector
expect(wrapper.find('#foo')).to.have.lengthOf(1);

```
 Component Constructors:

 
```
import Foo from '../components/Foo';

const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(1);

```
 Component Display Name:

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('Foo')).to.have.lengthOf(1);

```
 Object Property Selector:

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find({ prop: 'value' })).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.findWhere(predicate) => ShallowWrapper`](findwhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/find.html>

.findWhere(fn) => ShallowWrapper
================================

 Finds every node in the render tree that returns true for the provided predicate function.

 
Arguments
----------

 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function called with the passed in wrapped nodes.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the found nodes.

 
Example
--------

 
```
const wrapper = shallow(<MyComponent />);
const complexComponents = wrapper.findWhere((n) => n.type() !== 'string');
expect(complexComponents).to.have.lengthOf(8);

```
 
Related Methods
----------------

 * [`.find(selector) => ShallowWrapper`](find)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/findWhere.html>

.first() => ShallowWrapper
==========================

 Reduce the set of matched nodes to the first in the set, just like `.at(0)`.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the first node in the set.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo).first().props().foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.at(index) => ShallowWrapper`](at) - retrieve any wrapper node
* [`.last() => ShallowWrapper`](last)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/first.html>

.forEach(fn) => Self
====================

 Iterates through each node of the current wrapper and executes the provided function with a wrapper around the corresponding node passed in as the first argument.

 
Arguments
----------

 1. `fn` (`Function ( ShallowWrapper node, Number index )`): A callback to be run for every node in the collection. Should expect a ShallowWrapper as the first argument, and will be run with a context of the original instance.

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
const wrapper = shallow((
  <div>
    <div className="foo bax" />
    <div className="foo bar" />
    <div className="foo baz" />
  </div>
));

wrapper.find('.foo').forEach((node) => {
  expect(node.hasClass('foo')).to.equal(true);
});

```
 
Related Methods
----------------

 * [`.map(fn) => ShallowWrapper`](map)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/forEach.html>

.get(index) => ReactElement
===========================

 Returns the node at a given index of the current wrapper.

 
Arguments
----------

 1. `index` (`Number`): A zero-based integer indicating which node to retrieve.

 
Returns
--------

 `ReactElement`: The retrieved node.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo).get(0).props.foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.at(index) => ShallowWrapper`](at) - same, but returns the React node in a single-node wrapper.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/get.html>

.getWrappingComponent() => ShallowWrapper
=========================================

 If a `wrappingComponent` was passed in `options`, this methods returns a `ShallowWrapper` around the rendered `wrappingComponent`. This `ShallowWrapper` can be used to update the `wrappingComponent`'s props, state, etc.

 
Returns
--------

 `ShallowWrapper`: A `ShallowWrapper` around the rendered `wrappingComponent`

 
Examples
---------

 
```
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import store from './my/app/store';
import mockStore from './my/app/mockStore';

function MyProvider(props) {
  const { children, customStore } = props;

  return (
    <Provider store={customStore || store}>
      <Router>
        {children}
      </Router>
    </Provider>
  );
}
MyProvider.propTypes = {
  children: PropTypes.node,
  customStore: PropTypes.shape({}),
};
MyProvider.defaultProps = {
  children: null,
  customStore: null,
};

const wrapper = shallow(<MyComponent />, {
  wrappingComponent: MyProvider,
});
const provider = wrapper.getWrappingComponent();
provider.setProps({ customStore: mockStore });

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/getWrappingComponent.html>

.getElement() => ReactElement
=============================

 Returns the wrapped ReactElement.

 If the current wrapper is wrapping the root component, returns the root component's latest render output.

 
Returns
--------

 `ReactElement`: The retrieved ReactElement.

 
Examples
---------

 
```
const element = (
  <div>
    <span />
    <span />
  </div>
);

function MyComponent() {
  return element;
}

const wrapper = shallow(<MyComponent />);
expect(wrapper.getElement()).to.equal(element);

```
 
Related Methods
----------------

 * [`.getElements() => Array<ReactElement>`](getelements)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/getElement.html>

.getElements() => Array<ReactElement>
=====================================

 Returns the wrapped ReactElements

 If the current wrapper is wrapping the root component, returns the root component's latest render output wrapped in an array.

 
Returns
--------

 `Array<ReactElement>`: The retrieved ReactElements.

 
Examples
---------

 
```
const one = <span />;
const two = <span />;

function Test() {
  return (
    <div>
      {one}
      {two}
    </div>
  );
}

const wrapper = shallow(<Test />);
expect(wrapper.find('span').getElements()).to.deep.equal([one, two]);

```
 
Related Methods
----------------

 * [`.getElement() => ReactElement`](getelement)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/getElements.html>

.hasClass(className) => Boolean
===============================

 Returns whether or not the wrapped node has a `className` prop including the passed in class name. It must be a single-node wrapper.

 
Arguments
----------

 1. `className` (`String` | `RegExp`): A single class name or a regex expression.

 
Returns
--------

 `Boolean`: whether or not the wrapped node has the class.

 
Example
--------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

```
 
```
// Searching using RegExp works fine when classes were injected by a jss decorator
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.my-button').hasClass(/(ComponentName)-(other)-(\d+)/)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.hasClass()` expects a class name, NOT a CSS selector. `.hasClass('.foo')` should be `.hasClass('foo')`



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/hasClass.html>

.hostNodes() => ShallowWrapper
==============================

 Returns a new wrapper with only host nodes. When using `react-dom`, host nodes are HTML elements rather than custom React components, e.g. `<div>` versus `<MyComponent>`.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the filtered nodes.

 
Examples
---------

 The following code takes a wrapper with two nodes, one a `<MyComponent>` React component, and the other a `<span>`, and filters out the React component.

 
```
const wrapper = shallow((
  <div>
    <MyComponent className="foo" />
    <span className="foo" />
  </div>
));
const twoNodes = wrapper.find('.foo');
expect(twoNodes.hostNodes()).to.have.lengthOf(1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/hostNodes.html>

.html() => String
=================

 Returns a string of the rendered HTML markup of the entire current render tree (not just the shallow-rendered part). It uses [static rendering](../render) internally. To see only the shallow-rendered part use [`.debug()`](debug).

 Note: can only be called on a wrapper of a single node.

 
Returns
--------

 `String`: The resulting HTML string

 
Examples
---------

 
```
function Foo() {
  return (<div className="in-foo" />);
}

```
 
```
function Bar() {
  return (
    <div className="in-bar">
      <Foo />
    </div>
  );
}

```
 
```
const wrapper = shallow(<Bar />);
expect(wrapper.html()).to.equal('<div class="in-bar"><div class="in-foo"></div></div>');
expect(wrapper.find(Foo).html()).to.equal('<div class="in-foo"></div>');

```
 
```
const wrapper = shallow(<div><b>important</b></div>);
expect(wrapper.html()).to.equal('<div><b>important</b></div>');

```
 
Related Methods
----------------

 * [`.text() => String`](text)
* [`.debug() => String`](debug)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/html.html>

.instance() => ReactComponent
=============================

 Returns the single-node wrapper's node's underlying class instance; `this` in its methods.

 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.

 
Returns
--------

 `ReactComponent|DOMComponent`: The retrieved instance.

 
Example
--------

 
```
function Stateless() {
  return <div>Stateless</div>;
}

class Stateful extends React.Component {
  render() {
    return <div>Stateful</div>;
  }
}

```
 
React 16.x
-----------

 
```
test('shallow wrapper instance should be null', () => {
  const wrapper = shallow(<Stateless />);
  const instance = wrapper.instance();

  expect(instance).to.equal(null);
});

test('shallow wrapper instance should not be null', () => {
  const wrapper = shallow(<Stateful />);
  const instance = wrapper.instance();

  expect(instance).to.be.instanceOf(Stateful);
});

```
 
React 15.x
-----------

 
```
test('shallow wrapper instance should not be null', () => {
  const wrapper = shallow(<Stateless />);
  const instance = wrapper.instance();

  expect(instance).to.be.instanceOf(Stateless);
});

test('shallow wrapper instance should not be null', () => {
  const wrapper = shallow(<Stateful />);
  const instance = wrapper.instance();

  expect(instance).to.be.instanceOf(Stateful);
});

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/instance.html>

.invoke(invokePropName)(...args) => Any
=======================================

 Invokes a function prop.

 
Arguments
----------

 1. `propName` (`String`): The function prop that is invoked
2. `...args` (`Any` [optional]): Arguments that is passed to the prop function

 This essentially calls wrapper.prop(propName)(...args).

 
Returns
--------

 `Any`: Returns the value from the prop function

 
Example
--------

 
```
class Foo extends React.Component {
  loadData() {
    return fetch();
  }

  render() {
    return (
      <div>
        <button
          type="button"
          onClick={() => this.loadData()}
        >
          Load more
        </button>
      </div>
    );
  }
}
const wrapper = shallow(<Foo />);
wrapper.find('button').invoke('onClick')().then(() => {
  // expect()
});

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/invoke.html>

.is(selector) => Boolean
========================

 Returns whether or not the single wrapped node matches the provided selector. It must be a single-node wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `Boolean`: whether or not the wrapped node matches the provided selector.

 
Example
--------

 
```
const wrapper = shallow(<div className="some-class other-class" />);
expect(wrapper.is('.some-class')).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/is.html>

.isEmpty() => Boolean
=====================

 **Deprecated**: Use [`.exists()`](exists) instead.

 Returns whether or not the wrapper is empty.

 
Returns
--------

 `Boolean`: whether or not the wrapper is empty.

 
Example
--------

 
```
const wrapper = shallow(<div className="some-class" />);
expect(wrapper.find('.other-class').isEmpty()).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/isEmpty.html>

.isEmptyRender() => Boolean
===========================

 Returns whether or not the wrapper would ultimately render only the allowed falsy values: `false` or `null`.

 
Returns
--------

 `Boolean`: whether the return is falsy

 
Example
--------

 
```
function Foo() {
  return null;
}

const wrapper = shallow(<Foo />);
expect(wrapper.isEmptyRender()).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/isEmptyRender.html>

.key() => String
================

 Returns the key value for the node of the current wrapper. It must be a single-node wrapper.

 
Example
--------

 
```
const wrapper = shallow((
  <ul>
    {['foo', 'bar'].map((s) => <li key={s}>{s}</li>)}
  </ul>
)).find('li');
expect(wrapper.at(0).key()).to.equal('foo');
expect(wrapper.at(1).key()).to.equal('bar');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/key.html>

.last() => ShallowWrapper
=========================

 Reduce the set of matched nodes to the last in the set, just like `.at(length - 1)`.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the last node in the set.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo).last().props().foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.at(index) => ShallowWrapper`](at) - retrieve a wrapper node by index
* [`.first() => ShallowWrapper`](first)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/last.html>

.map(fn) => Array<Any>
======================

 Maps the current array of nodes to another array. Each node is passed in as a `ShallowWrapper` to the map function.

 
Arguments
----------

 1. `fn` (`Function ( ShallowWrapper node, Number index ) => Any`): A mapping function to be run for every node in the collection, the results of which will be mapped to the returned array. Should expect a ShallowWrapper as the first argument, and will be run with a context of the original instance.

 
Returns
--------

 `Array<Any>`: Returns an array of the returned values from the mapping function..

 
Example
--------

 
```
const wrapper = shallow((
  <div>
    <div className="foo">bax</div>
    <div className="foo">bar</div>
    <div className="foo">baz</div>
  </div>
));

const texts = wrapper.find('.foo').map((node) => node.text());
expect(texts).to.eql(['bax', 'bar', 'baz']);

```
 
Related Methods
----------------

 * [`.forEach(fn) => ShallowWrapper`](foreach)
* [`.reduce(fn[, initialValue]) => Any`](reduce)
* [`.reduceRight(fn[, initialValue]) => Any`](reduceright)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/map.html>

.matchesElement(patternNode) => Boolean
=======================================

 Returns whether or not a given react element `patternNode` matches the wrapper's render tree. It must be a single-node wrapper, and only the root node is checked.

 The `patternNode` acts like a wildcard. For it to match a node in the wrapper:

 * tag names must match
* contents must match: In text nodes, leading and trailing spaces are ignored, but not space in the middle. Child elements must match according to these rules, recursively.
* `patternNode` props (attributes) must appear in the wrapper's nodes, but not the other way around. Their values must match if they do appear.
* `patternNode` style CSS properties must appear in the wrapper's node's style, but not the other way around. Their values must match if they do appear.

 
Arguments
----------

 1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the wrapper's single node.

 
Returns
--------

 `Boolean`: whether or not the current wrapper match the one passed in.

 
Example
--------

 
```
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // ...
  }

  render() {
    return (
      <button type="button" onClick={this.handleClick} className="foo bar">Hello</button>
    );
  }
}

const wrapper = shallow(<MyComponent />);
expect(wrapper.matchesElement(<button>Hello</button>)).to.equal(true);
expect(wrapper.matchesElement(<button className="foo bar">Hello</button>)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.matchesElement()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines matching based on the matching of the node's children as well.

 
Related Methods
----------------

 * [`.containsMatchingElement() => ShallowWrapper`](containsmatchingelement) - searches all nodes in the wrapper, and searches their entire depth



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/matchesElement.html>

.name() => String|null
======================

 Returns the name of the current node of this wrapper. If it's a composite component, this will be the name of the top-most rendered component. If it's a native DOM node, it will be a string of the tag name. If it's `null`, it will be `null`.

 The order of precedence on returning the name is: `type.displayName` -> `type.name` -> `type`.

 Note: can only be called on a wrapper of a single node.

 
Returns
--------

 `String|null`: The name of the current node

 
Examples
---------

 
```
const wrapper = shallow(<div />);
expect(wrapper.name()).to.equal('div');

```
 
```
function SomeWrappingComponent() {
  return <Foo />;
}
const wrapper = shallow(<SomeWrappingComponent />);
expect(wrapper.name()).to.equal('Foo');

```
 
```
Foo.displayName = 'A cool custom name';
function SomeWrappingComponent() {
  return <Foo />;
}
const wrapper = shallow(<SomeWrappingComponent />);
expect(wrapper.name()).to.equal('A cool custom name');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/name.html>

.not(selector) => ShallowWrapper
================================

 Returns a new wrapper with only the nodes of the current wrapper that don't match the provided selector.

 This method is effectively the negation or inverse of [`filter`](filter).

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the filtered nodes.

 
Examples
---------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.filterWhere(predicate) => ShallowWrapper`](filterwhere)
* [`.filter(selector) => ShallowWrapper`](filter)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/not.html>

.parent() => ShallowWrapper
===========================

 Returns a wrapper with the direct parent of the node in the current wrapper.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the resulting nodes.

 
Examples
---------

 
```
const wrapper = shallow(<ToDoList />);
expect(wrapper.find('ul').parent().is('div')).to.equal(true);

```
 
Related Methods
----------------

 * [`.parents([selector]) => ShallowWrapper`](parents)
* [`.children([selector]) => ShallowWrapper`](children)
* [`.closest(selector) => ShallowWrapper`](closest)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/parent.html>

.parents([selector]) => ShallowWrapper
======================================

 Returns a wrapper around all of the parents/ancestors of the single node in the wrapper. Does not include the node itself. Optionally, a selector can be provided and it will filter the parents by this selector. It must be a single-node wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector) [optional]): The selector to filter the parents by.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the resulting nodes.

 
Examples
---------

 
```
const wrapper = shallow(<ToDoList />);
expect(wrapper.find('ul').parents()).to.have.lengthOf(2);

```
 
Related Methods
----------------

 * [`.children([selector]) => ShallowWrapper`](children)
* [`.parent() => ShallowWrapper`](parent)
* [`.closest(selector) => ShallowWrapper`](closest)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/parents.html>

.prop(key) => Any
=================

 Returns the prop value for the root node of the wrapper with the provided key. It must be a single-node wrapper.

 NOTE: When called on a shallow wrapper, `.prop(key)` will return values for props on the root node that the component *renders*, not the component itself. To return the props for the entire React component, use `wrapper.instance().props`. See [`.instance() => ReactComponent`](instance)

 
Arguments
----------

 1. `key` (`String`): The prop name, that is, `this.props[key]` or `props[key]` for the root node of the wrapper.

 
Example
--------

 
```
import PropTypes from 'prop-types';
import ValidateNumberInputComponent from './ValidateNumberInputComponent';

class MyComponent extends React.Component {
  constructor(...args) {
    super(...args);

    this.state = {
      number: 0,
    };
    this.onValidNumberInput = this.onValidNumberInput.bind(this);
  }

  onValidNumberInput(e) {
    const number = e.target.value;
    if (!number || typeof number === 'number') {
      this.setState({ number });
    }
  }

  render() {
    const { includedProp } = this.props;
    const { number } = this.state;
    return (
      <div className="foo bar" includedProp={includedProp}>
        <ValidateNumberInputComponent onChangeHandler={onValidNumberInput} number={number} />
      </div>
    );
  }
}
MyComponent.propTypes = {
  includedProp: PropTypes.string.isRequired,
};

const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
expect(wrapper.prop('includedProp')).to.equal('Success!');

const validInput = 1;
wrapper.find('ValidateNumberInputComponent').prop('onChangeHandler')(validInput);
expect(wrapper.state('number')).to.equal(number);

const invalidInput = 'invalid input';
wrapper.find('ValidateNumberInputComponent').prop('onChangeHandler')(invalidInput);
expect(wrapper.state('number')).to.equal(0);

// Warning: .prop(key) only returns values for props that exist in the root node.
// See the note above about wrapper.instance().props to return all props in the React component.

console.log(wrapper.prop('includedProp'));
// "Success!"

console.log(wrapper.prop('excludedProp'));
// undefined

console.log(wrapper.instance().props.excludedProp);
// "I'm not included"

```
 
Related Methods
----------------

 * [`.props() => Object`](props)
* [`.state([key]) => Any`](state)
* [`.context([key]) => Any`](context)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/prop.html>

.props() => Object
==================

 Returns the props object for the root node of the wrapper. It must be a single-node wrapper.

 NOTE: When called on a shallow wrapper, `.props()` will return values for props on the root node that the component *renders*, not the component itself.

 This method is a reliable way of accessing the props of a node; `wrapper.instance().props` will work as well, but in React 16+, stateless functional components do not have an instance. See [`.instance() => ReactComponent`](instance)

 
Example
--------

 
```

import PropTypes from 'prop-types';

function MyComponent(props) {
  const { includedProp } = props;
  return (
    <div className="foo bar" includedProp={includedProp}>Hello</div>
  );
}
MyComponent.propTypes = {
  includedProp: PropTypes.string.isRequired,
};

const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
expect(wrapper.props().includedProp).to.equal('Success!');

// Warning: .props() only returns props that are passed to the root node,
// which does not include excludedProp in this example.
// See the note above about wrapper.instance().props.

console.log(wrapper.props());
// {children: "Hello", className: "foo bar", includedProp="Success!"}

console.log(wrapper.instance().props); // React 15.x - working as expected
// {children: "Hello", className: "foo bar", includedProp:"Success!", excludedProp: "I'm not included"}

console.log(wrapper.instance().props);
// React 16.* - Uncaught TypeError: Cannot read property 'props' of null

```
 
Related Methods
----------------

 * [`.prop(key) => Any`](prop)
* [`.state([key]) => Any`](state)
* [`.context([key]) => Any`](context)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/props.html>

.reduce(fn[, initialValue]) => Any
==================================

 Applies the provided reducing function to every node in the wrapper to reduce to a single value. Each node is passed in as a `ShallowWrapper`, and is processed from left to right.

 
Arguments
----------

 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the following arguments:


	* `value` (`T`): The value returned by the previous invocation of this function
	* `node` (`ShallowWrapper`): A wrapper around the node being processed
	* `index` (`Number`): The index of the node being processed
2. `initialValue` (`T` [optional]): If provided, this will be passed in as the first argument to the first invocation of the reducing function. If omitted, the first `node` will be provided and the iteration will begin on the second node in the collection.

 
Returns
--------

 `T`: Returns an array of the returned values from the mapping function...

 
Example
--------

 
```
function Foo() {
  return (
    <div>
      <Bar amount={2} />
      <Bar amount={4} />
      <Bar amount={8} />
    </div>
  );
}

```
 
```
const wrapper = shallow(<Foo />);
const total = wrapper.find(Bar).reduce((amount, n) => amount + n.prop('amount'), 0);
expect(total).to.equal(14);

```
 
Related Methods
----------------

 * [`.reduceRight(fn[, initialValue]) => Any`](reduceright)
* [`.forEach(fn) => ShallowWrapper`](foreach)
* [`.map(fn) => Array<Any>`](map)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/reduce.html>

.reduceRight(fn[, initialValue]) => Any
=======================================

 Applies the provided reducing function to every node in the wrapper to reduce to a single value. Each node is passed in as a `ShallowWrapper`, and is processed from right to left.

 
Arguments
----------

 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the following arguments:


	* `value` (`T`): The value returned by the previous invocation of this function
	* `node` (`ShallowWrapper`): A single-node wrapper around the node being processed
	* `index` (`Number`): The index of the node being processed
2. `initialValue` (`T` [optional]): If provided, this will be passed in as the first argument to the first invocation of the reducing function. If omitted, the first `node` will be provided and the iteration will begin on the second node in the collection.

 
Returns
--------

 `T`: Returns an array of the returned values from the mapping function...

 
Example
--------

 
```
function Foo() {
  return (
    <div>
      <Bar amount={2} />
      <Bar amount={4} />
      <Bar amount={8} />
    </div>
  );
}

```
 
```
const wrapper = shallow(<Foo />);
const total = wrapper.find(Bar).reduceRight((amount, n) => amount + n.prop('amount'), 0);
expect(total).to.equal(14);

```
 
Related Methods
----------------

 * [`.reduce(fn[, initialValue]) => Any`](reduce)
* [`.forEach(fn) => ShallowWrapper`](foreach)
* [`.map(fn) => Array<Any>`](map)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/reduceRight.html>

.render() => CheerioWrapper
===========================

 Returns a CheerioWrapper around the rendered HTML of the single node's subtree. It must be a single-node wrapper.

 
Returns
--------

 `CheerioWrapper`: The resulting Cheerio object

 
Examples
---------

 
```
function Foo() {
  return (<div className="in-foo" />);
}

```
 
```
function Bar() {
  return (
    <div className="in-bar">
      <Foo />
    </div>
  );
}

```
 
```
const wrapper = shallow(<Bar />);
expect(wrapper.find('.in-foo')).to.have.lengthOf(0);
expect(wrapper.find(Foo).render().find('.in-foo')).to.have.lengthOf(1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/render.html>

.renderProp(propName)(...args) => ShallowWrapper
================================================

 Returns a function that, when called with arguments `args`, will return a new wrapper based on the render prop in the original wrapper's prop `propName`.

 NOTE: can only be called on wrapper of a single non-DOM component element node.

 
Arguments
----------

 1. `propName` (`String`):
2. `...args` (`Array<Any>`):

 This essentially calls `wrapper.prop(propName)(...args)`.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the node returned from the render prop.

 
Examples
---------

 ##### 
Test Setup

 
```
class Mouse extends React.Component {
  constructor() {
    super();
    this.state = { x: 0, y: 0 };
  }

  render() {
    const { render } = this.props;
    return (
      <div
        style={{ height: '100%' }}
        onMouseMove={(event) => {
          this.setState({
            x: event.clientX,
            y: event.clientY,
          });
        }}
      >
        {render(this.state)}
      </div>
    );
  }
}

Mouse.propTypes = {
  render: PropTypes.func.isRequired,
};

```
 
```
const App = () => (
  <div style={{ height: '100%' }}>
    <Mouse
      render={(x = 0, y = 0) => (
        <h1>
          The mouse position is ({x}, {y})
        </h1>
      )}
    />
  </div>
);

```
 ##### 
Testing with no arguments

 
```
const wrapper = shallow(<App />)
  .find(Mouse)
  .renderProp('render')();

expect(wrapper.equals(<h1>The mouse position is 0, 0</h1>)).to.equal(true);

```
 ##### 
Testing with multiple arguments

 
```
const wrapper = shallow(<App />)
  .find(Mouse)
  .renderProp('render')(10, 20);

expect(wrapper.equals(<h1>The mouse position is 10, 20</h1>)).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/renderProp.html>

.setContext(context) => Self
============================

 A method that sets the context of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing contexts.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `context` (`Object`): An object containing new props to merge in with the current state

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
import React from 'react';
import PropTypes from 'prop-types';

function SimpleComponent(props, context) {
  const { name } = context;
  return <div>{name}</div>;
}
SimpleComponent.contextTypes = {
  name: PropTypes.string,
};

```
 
```
const context = { name: 'foo' };
const wrapper = shallow(<SimpleComponent />, { context });
expect(wrapper.text()).to.equal('foo');
wrapper.setContext({ name: 'bar' });
expect(wrapper.text()).to.equal('bar');
wrapper.setContext({ name: 'baz' });
expect(wrapper.text()).to.equal('baz');

```
 
Common Gotchas
---------------

 * `.setContext()` can only be used on a wrapper that was initially created with a call to `shallow()` that includes a `context` specified in the options argument.
* The root component you are rendering must have a `contextTypes` static property.

 
Related Methods
----------------

 * [`.setState(state[, callback]) => Self`](setstate)
* [`.setProps(props[, callback]) => Self`](setprops)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/setContext.html>

.setProps(nextProps[, callback]) => Self
========================================

 A method that sets the props of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing props. Calling this, for instance, will call the `componentWillReceiveProps` lifecycle method.

 Similar to `setState`, this method accepts a props object and will merge it in with the already existing props.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `nextProps` (`Object`): An object containing new props to merge in with the current props
2. `callback` (`Function` [optional]): If provided, the callback function will be executed once setProps has completed

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
import React from 'react';
import PropTypes from 'prop-types';

function Foo({ name }) {
  return (
    <div className={name} />
  );
}
Foo.propTypes = {
  name: PropTypes.string.isRequired,
};

```
 
```
const wrapper = shallow(<Foo name="foo" />);
expect(wrapper.find('.foo')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(0);
wrapper.setProps({ name: 'bar' });
expect(wrapper.find('.foo')).to.have.lengthOf(0);
expect(wrapper.find('.bar')).to.have.lengthOf(1);

```
 
```
import sinon from 'sinon';

const spy = sinon.spy(MyComponent.prototype, 'componentWillReceiveProps');

const wrapper = shallow(<MyComponent foo="bar" />);
expect(spy).to.have.property('callCount', 0);
wrapper.setProps({ foo: 'foo' });
expect(spy).to.have.property('callCount', 1);

```
 
Related Methods
----------------

 * [`.setState(state) => Self`](setstate)
* [`.setContext(context) => Self`](setcontext)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/setProps.html>

.setState(nextState[, callback]) => Self
========================================

 A method to invoke `setState()` on the root component instance, similar to how you might in the methods of the component, and re-renders. This method is useful for testing your component in hard-to-achieve states, however should be used sparingly. If possible, you should utilize your component's external API (which is often accessible via [`.instance()`](instance)) in order to get it into whatever state you want to test, in order to be as accurate of a test as possible. This is not always practical, however.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `nextState` (`Object`): An object containing new state to merge in with the current state
2. `callback` (`Function` [optional]): If provided, the callback function will be executed once setState has completed

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'foo' };
  }

  render() {
    const { name } = this.state;
    return (
      <div className={name} />
    );
  }
}

```
 
```
const wrapper = shallow(<Foo />);
expect(wrapper.find('.foo')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(0);
wrapper.setState({ name: 'bar' });
expect(wrapper.find('.foo')).to.have.lengthOf(0);
expect(wrapper.find('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.setProps(props[, callback]) => Self`](setprops)
* [`.setContext(context) => Self`](setcontext)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/setState.html>

.shallow([options]) => ShallowWrapper
=====================================

 Shallow renders the root node and returns a shallow wrapper around it. It must be a single-node wrapper.

 
Arguments
----------

 1. `options` (`Object` [optional]):
	* `options.context`: (`Object` [optional]): Context to be passed into the component
	* `options.disableLifecycleMethods`: (`Boolean` [optional]): If set to true, `componentDidMount` is not called on the component, and `componentDidUpdate` is not called after [`setProps`](shallowwrapper/setprops.md) and [`setContext`](shallowwrapper/setcontext.md). Default to `false`.

 
Returns
--------

 `ShallowWrapper`: A new wrapper that wraps the node after it's been shallow rendered.

 
Examples
---------

 
```
function Bar() {
  return (
    <div>
      <div className="in-bar" />
    </div>
  );
}

```
 
```
function Foo() {
  return (
    <div>
      <Bar />
    </div>
  );
}

```
 
```
const wrapper = shallow(<Foo />);
expect(wrapper.find('.in-bar')).to.have.lengthOf(0);
expect(wrapper.find(Bar)).to.have.lengthOf(1);
expect(wrapper.find(Bar).shallow().find('.in-bar')).to.have.lengthOf(1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/shallow.html>

.simulate(event[, ...args]) => Self
===================================

 Simulate events on the root node in the wrapper. It must be a single-node wrapper.

 
Arguments
----------

 1. `event` (`String`): The event name to be simulated
2. `...args` (`Any` [optional]): A mock event object that will get passed through to the event handlers.

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example `class component`
--------------------------

 
```
class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <div className={`clicks-${count}`}>
          {count} clicks
        </div>
        <a href="url" onClick={() => { this.setState({ count: count + 1 }); }}>
          Increment
        </a>
      </div>
    );
  }
}

const wrapper = shallow(<Foo />);

expect(wrapper.find('.clicks-0').length).to.equal(1);
wrapper.find('a').simulate('click');
expect(wrapper.find('.clicks-1').length).to.equal(1);

```
 
Example `functional component`
-------------------------------

 
```
const Foo = ({ width, height, onChange }) => (
  <div>
    <input name="width" value={width} onChange={onChange} />
    <input name="height" value={height} onChange={onChange} />
  </div>
);
Foo.propTypes = {
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  onChange: PropTypes.func.isRequired,
};

const testState = { width: 10, height: 20 };
const wrapper = shallow((
  <Foo
    width={testState.width}
    height={testState.height}
    onChange={(e) => {
      testState[e.target.name] = e.target.value;
    }}
  />
));

expect(wrapper.find('input').at(0).prop('value')).toEqual(10);
expect(wrapper.find('input').at(1).prop('value')).toEqual(20);
wrapper.find('input').at(0).simulate('change', { target: { name: 'width', value: 50 } });
wrapper.find('input').at(1).simulate('change', { target: { name: 'height', value: 70 } });
expect(testState.width).toEqual(50);
expect(testState.height).toEqual(70);

```
 
Common Gotchas
---------------

 * Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call `.simulate()` on the actual node that has the event handler set.
* Even though the name would imply this simulates an actual event, `.simulate()` will in fact target the component's prop based on the event you give it. For example, `.simulate('click')` will actually get the `onClick` prop and call it.
* As noted in the function signature above passing a mock event is optional. Keep in mind that if the code you are testing uses the event for something like, calling `event.preventDefault()` or accessing any of its properties you must provide a mock event object with the properties your code requires.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/simulate.html>

.simulateError(error) => Self
=============================

 Simulate a component throwing an error as part of its rendering lifecycle.

 This is particularly useful in combination with React 16 error boundaries (ie, the `componentDidCatch` and `static getDerivedStateFromError` lifecycle methods).

 
Arguments
----------

 1. `error` (`Any`): The error to throw.

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
function Something() {
  // this is just a placeholder
  return null;
}

class ErrorBoundary extends React.Component {
  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    const { spy } = this.props;
    spy(error, info);
  }

  render() {
    const { children } = this.props;
    const { hasError } = this.state;
    return (
      <React.Fragment>
        {hasError ? 'Error' : children}
      </React.Fragment>
    );
  }
}
ErrorBoundary.propTypes = {
  children: PropTypes.node.isRequired,
  spy: PropTypes.func.isRequired,
};

const spy = sinon.spy();
const wrapper = shallow(<ErrorBoundary spy={spy}><Something /></ErrorBoundary>);
const error = new Error('hi!');
wrapper.find(Something).simulateError(error);

expect(wrapper.state()).to.have.property('hasError', true);
expect(spy).to.have.property('callCount', 1);
expect(spy.args).to.deep.equal([
  error,
  {
    componentStack: `
    in Something (created by ErrorBoundary)
    in ErrorBoundary (created by WrapperComponent)
    in WrapperComponent`,
  },
]);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/simulateError.html>

.slice([begin[, end]]) => ShallowWrapper
========================================

 Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.

 
Arguments
----------

 1. `begin` (`Number` [optional]): Index from which to slice (defaults to `0`). If negative, this is treated as `length+begin`.
2. `end` (`Number` [optional]): Index at which to end slicing (defaults to `length`). If negative, this is treated as `length+end`.

 
Returns
--------

 `ShallowWrapper`: A new wrapper with the subset of nodes specified.

 
Examples
---------

 
```
const wrapper = shallow((
  <div>
    <div className="foo bax" />
    <div className="foo bar" />
    <div className="foo baz" />
  </div>
));
expect(wrapper.find('.foo').slice(1)).to.have.lengthOf(2);
expect(wrapper.find('.foo').slice(1).at(0).hasClass('bar')).to.equal(true);
expect(wrapper.find('.foo').slice(1).at(1).hasClass('baz')).to.equal(true);

```
 
```
const wrapper = shallow((
  <div>
    <div className="foo bax" />
    <div className="foo bar" />
    <div className="foo baz" />
  </div>
));
expect(wrapper.find('.foo').slice(1, 2)).to.have.lengthOf(1);
expect(wrapper.find('.foo').slice(1, 2).at(0).hasClass('bar')).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/slice.html>

.some(selector) => Boolean
==========================

 Returns whether or not any of the nodes in the wrapper match the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `Boolean`: True if at least one of the nodes in the current wrapper matched the provided selector.

 
Examples
---------

 
```
const wrapper = shallow((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').some('.qoo')).to.equal(true);
expect(wrapper.find('.foo').some('.foo')).to.equal(true);
expect(wrapper.find('.foo').some('.bar')).to.equal(false);

```
 
Related Methods
----------------

 * [`.someWhere(predicate) => Boolean`](somewhere)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/some.html>

.someWhere(fn) => Boolean
=========================

 Returns whether or not any of the nodes in the wrapper pass the provided predicate function.

 
Arguments
----------

 1. `predicate` (`ShallowWrapper => Boolean`): A predicate function to match the nodes.

 
Returns
--------

 `Boolean`: True if at least one of the nodes in the current wrapper passed the predicate function.

 
Example
--------

 
```
const wrapper = shallow((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').someWhere((n) => n.hasClass('qoo'))).to.equal(true);
expect(wrapper.find('.foo').someWhere((n) => n.hasClass('foo'))).to.equal(true);
expect(wrapper.find('.foo').someWhere((n) => n.hasClass('bar'))).to.equal(false);

```
 
Related Methods
----------------

 * [`.some(selector) => Boolean`](some)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/someWhere.html>

.state([key]) => Any
====================

 Returns the state hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.

 
Arguments
----------

 1. `key` (`String` [optional]): If provided, the return value will be the `this.state[key]` of the root component instance.

 
Example
--------

 
```
const wrapper = shallow(<MyComponent />);
expect(wrapper.state().foo).to.equal(10);
expect(wrapper.state('foo')).to.equal(10);

```
 
Related Methods
----------------

 * [`.props() => Object`](props)
* [`.prop(key) => Any`](prop)
* [`.context([key]) => Any`](context)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/state.html>

.tap(intercepter) => Self
=========================

 Invokes intercepter and returns itself. intercepter is called with itself. This is helpful when debugging nodes in method chains.

 
Arguments
----------

 1. `intercepter` (`Self`): the current ShallowWrapper instance.

 
Returns
--------

 `Self`: the current ShallowWrapper instance.

 
Example
--------

 
```
const result = shallow((
  <ul>
    <li>xxx</li>
    <li>yyy</li>
    <li>zzz</li>
  </ul>
)).find('li')
  .tap((n) => console.log(n.debug()))
  .map((n) => n.text());

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/tap.html>

.text() => String
=================

 Returns a string of the rendered text of the current render tree. This function should be looked at with skepticism if being used to test what the actual HTML output of the component will be. If that is what you would like to test, use enzyme's `render` function instead.

 Note: can only be called on a wrapper of a single node.

 
Returns
--------

 `String`: The resulting string

 
Examples
---------

 
```
const wrapper = shallow(<div><b>important</b></div>);
expect(wrapper.text()).to.equal('important');

```
 
```
const wrapper = shallow(<div><Foo /><b>important</b></div>);
expect(wrapper.text()).to.equal('<Foo />important');

```
 
Related Methods
----------------

 [`.html() => String`](html)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/text.html>

.type() => String | Function | null
===================================

 Returns the type of the only node of this wrapper. If it's a React component, this will be the component constructor. If it's a native DOM node, it will be a string with the tag name. If it's `null`, it will be `null`. It must be a single-node wrapper.

 
Returns
--------

 `String | Function | null`: The type of the node

 
Examples
---------

 
```
function Foo() {
  return <div />;
}
const wrapper = shallow(<Foo />);
expect(wrapper.type()).to.equal('div');

```
 
```
function Foo() {
  return (
    <div>
      <button type="button" className="btn">Button</button>
    </div>
  );
}
const wrapper = shallow(<Foo />);
expect(wrapper.find('.btn').type()).to.equal('button');

```
 
```
function Foo() {
  return <Bar />;
}
const wrapper = shallow(<Foo />);
expect(wrapper.type()).to.equal(Bar);

```
 
```
function Null() {
  return null;
}
const wrapper = shallow(<Null />);
expect(wrapper.type()).to.equal(null);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/type.html>

.unmount() => Self
==================

 A method that unmounts the component. This can be used to simulate a component going through an unmount/mount lifecycle.

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
import PropTypes from 'prop-types';
import sinon from 'sinon';

const spy = sinon.spy();

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.componentWillUnmount = spy;
  }

  render() {
    const { id } = this.props;
    return (
      <div className={id}>
        {id}
      </div>
    );
  }
}
Foo.propTypes = {
  id: PropTypes.string.isRequired,
};
const wrapper = shallow(<Foo id="foo" />);
expect(spy).to.have.property('callCount', 0);
wrapper.unmount();
expect(spy).to.have.property('callCount', 1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/unmount.html>

.update() => Self
=================

 Syncs the enzyme component tree snapshot with the react component tree. Useful to run before checking the render output if something external may be updating the state of the component somewhere.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 NOTE: this does not force a re-render. Use `wrapper.setProps({})` to force a re-render.

 
Returns
--------

 `ShallowWrapper`: Returns itself.

 
Example
--------

 
```
class ImpureRender extends React.Component {
  constructor(props) {
    super(props);
    this.count = 0;
  }

  render() {
    this.count += 1;
    return <div>{this.count}</div>;
  }
}

```
 
```
const wrapper = shallow(<ImpureRender />);
expect(wrapper.text()).to.equal('0');
wrapper.update();
expect(wrapper.text()).to.equal('1');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/update.html>

Full Rendering API (mount(...))
===============================

 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](https://github.com/tmpvar/jsdom) which is essentially a headless browser implemented completely in JS.

 **Note**: unlike shallow or static rendering, full rendering actually mounts the component in the DOM, which means that tests can affect each other if they are all using the same DOM. Keep that in mind while writing your tests and, if necessary, use [`.unmount()`](reactwrapper/unmount) or something similar as cleanup.

 
```
import { mount } from 'enzyme';
import sinon from 'sinon';
import Foo from './Foo';

describe('<Foo />', () => {
  it('calls componentDidMount', () => {
    sinon.spy(Foo.prototype, 'componentDidMount');
    const wrapper = mount(<Foo />);
    expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
  });

  it('allows us to set props', () => {
    const wrapper = mount(<Foo bar="baz" />);
    expect(wrapper.props().bar).to.equal('baz');
    wrapper.setProps({ bar: 'foo' });
    expect(wrapper.props().bar).to.equal('foo');
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

```
 
`mount(node[, options]) => ReactWrapper`
-----------------------------------------

 
Arguments
----------

 1. `node` (`ReactElement`): The node to render
2. `options` (`Object` [optional]):
3. `options.context`: (`Object` [optional]): Context to be passed into the component
4. `options.attachTo`: (`DOMElement` [optional]): DOM Element to attach the component to.
5. `options.childContextTypes`: (`Object` [optional]): Merged contextTypes for all children of the wrapper.
6. `options.wrappingComponent`: (`ComponentType` [optional]): A component that will render as a parent of the `node`. It can be used to provide context to the `node`, among other things. See the [`getWrappingComponent()` docs](reactwrapper/getwrappingcomponent) for an example. **Note**: `wrappingComponent` *must* render its children.
7. `options.wrappingComponentProps`: (`Object` [optional]): Initial props to pass to the `wrappingComponent` if it is specified.

 
Returns
--------

 `ReactWrapper`: The wrapper instance around the rendered output.

 
ReactWrapper API
-----------------

 
[`.find(selector) => ReactWrapper`](reactwrapper/find)
-------------------------------------------------------

 Find every node in the render tree that matches the provided selector.

 
[`.findWhere(predicate) => ReactWrapper`](reactwrapper/findwhere)
------------------------------------------------------------------

 Find every node in the render tree that returns true for the provided predicate function.

 
[`.filter(selector) => ReactWrapper`](reactwrapper/filter)
-----------------------------------------------------------

 Remove nodes in the current wrapper that do not match the provided selector.

 
[`.filterWhere(predicate) => ReactWrapper`](reactwrapper/filterwhere)
----------------------------------------------------------------------

 Remove nodes in the current wrapper that do not return true for the provided predicate function.

 
[`.hostNodes() => ReactWrapper`](reactwrapper/hostnodes)
---------------------------------------------------------

 Removes nodes that are not host nodes; e.g., this will only return HTML nodes.

 
[`.contains(nodeOrNodes) => Boolean`](reactwrapper/contains)
-------------------------------------------------------------

 Returns whether or not a given node or array of nodes exists in the render tree.

 
[`.containsMatchingElement(node) => Boolean`](reactwrapper/containsmatchingelement)
------------------------------------------------------------------------------------

 Returns whether or not a given react element exists in the render tree.

 
[`.containsAllMatchingElements(nodes) => Boolean`](reactwrapper/containsallmatchingelements)
---------------------------------------------------------------------------------------------

 Returns whether or not all the given react elements exist in the render tree.

 
[`.containsAnyMatchingElements(nodes) => Boolean`](reactwrapper/containsanymatchingelements)
---------------------------------------------------------------------------------------------

 Returns whether or not one of the given react elements exist in the render tree.

 
[`.equals(node) => Boolean`](reactwrapper/equals)
--------------------------------------------------

 Returns whether or not the current wrapper root node render tree looks like the one passed in.

 
[`.hasClass(className) => Boolean`](reactwrapper/hasclass)
-----------------------------------------------------------

 Returns whether or not the current root node has the given class name or not.

 
[`.is(selector) => Boolean`](reactwrapper/is)
----------------------------------------------

 Returns whether or not the current node matches a provided selector.

 
[`.exists([selector]) => Boolean`](reactwrapper/exists)
--------------------------------------------------------

 Returns whether or not the current node exists, or, if given a selector, whether that selector has any matching results.

 
[`.isEmpty() => Boolean`](reactwrapper/isempty)
------------------------------------------------

 *Deprecated*: Use [`.exists()`](reactwrapper/exists) instead.

 
[`.isEmptyRender() => Boolean`](reactwrapper/isemptyrender)
------------------------------------------------------------

 Returns whether or not the current component returns a falsy value.

 
[`.not(selector) => ReactWrapper`](reactwrapper/not)
-----------------------------------------------------

 Remove nodes in the current wrapper that match the provided selector. (inverse of `.filter()`)

 
[`.children([selector]) => ReactWrapper`](reactwrapper/children)
-----------------------------------------------------------------

 Get a wrapper with all of the children nodes of the current wrapper.

 
[`.childAt(index) => ReactWrapper`](reactwrapper/childat)
----------------------------------------------------------

 Returns a new wrapper with child at the specified index.

 
[`.parents([selector]) => ReactWrapper`](reactwrapper/parents)
---------------------------------------------------------------

 Get a wrapper with all of the parents (ancestors) of the current node.

 
[`.parent() => ReactWrapper`](reactwrapper/parent)
---------------------------------------------------

 Get a wrapper with the direct parent of the current node.

 
[`.closest(selector) => ReactWrapper`](reactwrapper/closest)
-------------------------------------------------------------

 Get a wrapper with the first ancestor of the current node to match the provided selector.

 
[`.render() => CheerioWrapper`](reactwrapper/render)
-----------------------------------------------------

 Returns a CheerioWrapper of the current node's subtree.

 
[`.renderProp(key)() => ReactWrapper`](reactwrapper/renderprop)
----------------------------------------------------------------

 Returns a wrapper of the node rendered by the provided render prop.

 
[`.text() => String`](reactwrapper/text)
-----------------------------------------

 Returns a string representation of the text nodes in the current render tree.

 
[`.html() => String`](reactwrapper/html)
-----------------------------------------

 Returns a static HTML rendering of the current node.

 
[`.get(index) => ReactElement`](reactwrapper/get)
--------------------------------------------------

 Returns the node at the provided index of the current wrapper.

 
[`.getDOMNode() => DOMComponent`](reactwrapper/getdomnode)
-----------------------------------------------------------

 Returns the outer most DOMComponent of the current wrapper.

 
[`.at(index) => ReactWrapper`](reactwrapper/at)
------------------------------------------------

 Returns a wrapper of the node at the provided index of the current wrapper.

 
[`.first() => ReactWrapper`](reactwrapper/first)
-------------------------------------------------

 Returns a wrapper of the first node of the current wrapper.

 
[`.last() => ReactWrapper`](reactwrapper/last)
-----------------------------------------------

 Returns a wrapper of the last node of the current wrapper.

 
[`.state([key]) => Any`](reactwrapper/state)
---------------------------------------------

 Returns the state of the root component.

 
[`.context([key]) => Any`](reactwrapper/context)
-------------------------------------------------

 Returns the context of the root component.

 
[`.props() => Object`](reactwrapper/props)
-------------------------------------------

 Returns the props of the root component.

 
[`.prop(key) => Any`](reactwrapper/prop)
-----------------------------------------

 Returns the named prop of the root component.

 
[`.invoke(propName)(...args) => Any`](reactwrapper/invoke)
-----------------------------------------------------------

 Invokes a prop function on the current node and returns the function's return value.

 
[`.key() => String`](reactwrapper/key)
---------------------------------------

 Returns the key of the root component.

 
[`.simulate(event[, mock]) => ReactWrapper`](reactwrapper/simulate)
--------------------------------------------------------------------

 Simulates an event on the current node.

 
[`.setState(nextState) => ReactWrapper`](reactwrapper/setstate)
----------------------------------------------------------------

 Manually sets state of the root component.

 
[`.setProps(nextProps[, callback]) => ReactWrapper`](reactwrapper/setprops)
----------------------------------------------------------------------------

 Manually sets props of the root component.

 
[`.setContext(context) => ReactWrapper`](reactwrapper/setcontext)
------------------------------------------------------------------

 Manually sets context of the root component.

 
[`.instance() => ReactComponent|DOMComponent`](reactwrapper/instance)
----------------------------------------------------------------------

 Returns the wrapper's underlying instance.

 
[`.getWrappingComponent() => ReactWrapper`](reactwrapper/getwrappingcomponent)
-------------------------------------------------------------------------------

 Returns a wrapper representing the `wrappingComponent`, if one was passed.

 
[`.unmount() => ReactWrapper`](reactwrapper/unmount)
-----------------------------------------------------

 A method that un-mounts the component.

 
[`.mount() => ReactWrapper`](reactwrapper/mount)
-------------------------------------------------

 A method that re-mounts the component.

 
[`.update() => ReactWrapper`](reactwrapper/update)
---------------------------------------------------

 Syncs the enzyme component tree snapshot with the react component tree.

 
[`.debug() => String`](reactwrapper/debug)
-------------------------------------------

 Returns a string representation of the current render tree for debugging purposes.

 
[`.type() => String|Function`](reactwrapper/type)
--------------------------------------------------

 Returns the type of the current node of the wrapper.

 
[`.name() => String`](reactwrapper/name)
-----------------------------------------

 Returns the name of the current node of the wrapper.

 
[`.forEach(fn) => ReactWrapper`](reactwrapper/foreach)
-------------------------------------------------------

 Iterates through each node of the current wrapper and executes the provided function

 
[`.map(fn) => Array`](reactwrapper/map)
----------------------------------------

 Maps the current array of nodes to another array.

 
[`.matchesElement(node) => Boolean`](reactwrapper/matcheselement)
------------------------------------------------------------------

 Returns whether or not a given react element matches the current render tree.

 
[`.reduce(fn[, initialValue]) => Any`](reactwrapper/reduce)
------------------------------------------------------------

 Reduces the current array of nodes to a value

 
[`.reduceRight(fn[, initialValue]) => Any`](reactwrapper/reduceright)
----------------------------------------------------------------------

 Reduces the current array of nodes to a value, from right to left.

 
[`.slice([begin[, end]]) => ReactWrapper`](reactwrapper/slice)
---------------------------------------------------------------

 Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.

 
[`.tap(intercepter) => Self`](reactwrapper/tap)
------------------------------------------------

 Taps into the wrapper method chain. Helpful for debugging.

 
[`.some(selector) => Boolean`](reactwrapper/some)
--------------------------------------------------

 Returns whether or not any of the nodes in the wrapper match the provided selector.

 
[`.someWhere(predicate) => Boolean`](reactwrapper/somewhere)
-------------------------------------------------------------

 Returns whether or not any of the nodes in the wrapper pass the provided predicate function.

 
[`.every(selector) => Boolean`](reactwrapper/every)
----------------------------------------------------

 Returns whether or not all of the nodes in the wrapper match the provided selector.

 
[`.everyWhere(predicate) => Boolean`](reactwrapper/everywhere)
---------------------------------------------------------------

 Returns whether or not all of the nodes in the wrapper pass the provided predicate function.

 
[`.ref(refName) => ReactComponent | HTMLElement`](reactwrapper/ref)
--------------------------------------------------------------------

 Returns the node that matches the provided reference name.

 
[`.detach() => void`](reactwrapper/detach)
-------------------------------------------

 Unmount the component from the DOM node it's attached to.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/mount.html>

.at(index) => ReactWrapper
==========================

 Returns a wrapper around the node at a given index of the current wrapper.

 
Arguments
----------

 1. `index` (`Number`): A zero-based integer indicating which node to retrieve.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the retrieved node.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo).at(0).props().foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.get(index) => ReactElement`](get) - same, but returns the React node itself, with no wrapper.
* [`.first() => ReactWrapper`](first) - same as at(0)
* [`.last() => ReactWrapper`](last)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/at.html>

.childAt(index) => ReactWrapper
===============================

 Returns a new wrapper with child at the specified index.

 
Arguments
----------

 1. `index` (`number`): A zero-based integer indicating which node to retrieve.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the resulting node.

 
Examples
---------

 
```
const wrapper = mount(<ToDoList items={items} />);
expect(wrapper.find('ul').childAt(0).type()).to.equal('li');

```
 
Related Methods
----------------

 * [`.parents([selector]) => ReactWrapper`](parents)
* [`.parent() => ReactWrapper`](parent)
* [`.closest(selector) => ReactWrapper`](closest)
* [`.children([selector]) => ReactWrapper`](children)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/childAt.html>

.children([selector]) => ReactWrapper
=====================================

 Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector can be provided and it will filter the children by this selector

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector) [optional]): A selector to filter the children by.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the resulting nodes.

 
Examples
---------

 
```
const wrapper = mount(<ToDoList items={items} />);
expect(wrapper.find('ul').children()).to.have.lengthOf(items.length);

```
 
Related Methods
----------------

 * [`.parents([selector]) => ReactWrapper`](parents)
* [`.parent() => ReactWrapper`](parent)
* [`.closest(selector) => ReactWrapper`](closest)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/children.html>

.contains(nodeOrNodes) => Boolean
=================================

 Returns whether or not all given react elements match elements in the render tree. It will determine if an element in the wrapper matches the expected element by checking if the expected element has the same props as the wrapper's element and share the same values.

 
Arguments
----------

 1. `nodeOrNodes` (`ReactElement|Array<ReactElement>`): The node or array of nodes whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has nodes anywhere in its render tree that match the ones passed in.

 
Example
--------

 
```
const wrapper = mount((
  <div>
    <div data-foo="foo" data-bar="bar">Hello</div>
  </div>
));

expect(wrapper.contains(<div data-foo="foo" data-bar="bar">Hello</div>)).to.equal(true);

expect(wrapper.contains(<div data-foo="foo">Hello</div>)).to.equal(false);
expect(wrapper.contains(<div data-foo="foo" data-bar="bar" data-baz="baz">Hello</div>)).to.equal(false);
expect(wrapper.contains(<div data-foo="foo" data-bar="Hello">Hello</div>)).to.equal(false);
expect(wrapper.contains(<div data-foo="foo" data-bar="bar" />)).to.equal(false);

```
 
```
const wrapper = mount((
  <div>
    <span>Hello</span>
    <div>Goodbye</div>
    <span>Again</span>
  </div>
));

expect(wrapper.contains([
  <span>Hello</span>,
  <div>Goodbye</div>,
])).to.equal(true);

expect(wrapper.contains([
  <span>Hello</span>,
  <div>World</div>,
])).to.equal(false);

```
 
Common Gotchas
---------------

 * `.contains()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.
* Every attribute of the wrapped element must be matched by the element you're checking. To permit (and ignore) additional attributes on the wrapped element, use containsMatchingElement() instead.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/contains.html>

.containsAllMatchingElements(patternNodes) => Boolean
=====================================================

 Returns whether or not all of the given react elements in `patternNodes` match an element in the wrapper's render tree. Every single element of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.

 
Arguments
----------

 1. `patternNodes` (`Array<ReactElement>`): The array of nodes whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has nodes anywhere in its render tree that looks like the nodes passed in.

 
Example
--------

 
```
const style = { fontSize: 13 };
const wrapper = mount((
  <div>
    <span className="foo">Hello</span>
    <div style={style}>Goodbye</div>
    <span>Again</span>
  </div>
));

expect(wrapper.containsAllMatchingElements([
  <span>Hello</span>,
  <div>Goodbye</div>,
])).to.equal(true);

```
 
Common Gotchas
---------------

 * `.containsAllMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with an array of ReactElement or a JSX expression.
* Keep in mind that this method determines matching based on the matching of the node's children as well.

 
Related Methods
----------------

 * [`.matchesElement() => ReactWrapper`](matcheselement) - rules for matching each node
* [`.containsMatchingElement() => ReactWrapper`](containsmatchingelement) - rules for matching whole wrapper
* [`.containsAnyMatchingElements() => ReactWrapper`](containsanymatchingelements) - must match at least one in patternNodes



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/containsAllMatchingElements.html>

.containsAnyMatchingElements(patternNodes) => Boolean
=====================================================

 Returns whether or not at least one of the given react elements in `patternNodes` matches an element in the wrapper's render tree. One or more elements of `patternNodes` must be matched one or more times. Matching follows the rules for `containsMatchingElement`.

 
Arguments
----------

 1. `patternNodes` (`Array<ReactElement>`): The array of nodes whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has a node anywhere in its render tree that looks like one of the array passed in.

 
Example
--------

 
```
const style = { fontSize: 13 };
const wrapper = mount((
  <div>
    <span className="foo">Hello</span>
    <div style={style}>Goodbye</div>
    <span>Again</span>
  </div>
));

expect(wrapper.containsAnyMatchingElements([
  <span>Bonjour</span>,
  <div>Goodbye</div>,
])).to.equal(true);

```
 
Common Gotchas
---------------

 * `.containsAnyMatchingElements()` expects an array of ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with an array ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.

 
Related Methods
----------------

 * [`.matchesElement() => ReactWrapper`](matcheselement) - rules for matching each node
* [`.containsMatchingElement() => ReactWrapper`](containsmatchingelement) - rules for matching whole wrapper
* [`.containsAllMatchingElements() => ReactWrapper`](containsallmatchingelements) - must match all nodes in patternNodes



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/containsAnyMatchingElements.html>

.containsMatchingElement(patternNode) => Boolean
================================================

 Returns whether or not a `patternNode` react element matches any element in the render tree.

 * the matches can happen anywhere in the wrapper's contents
* the wrapper can contain more than one node; all are searched

 Otherwise, the match follows the same rules as `matchesElement`.

 
Arguments
----------

 1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has a node anywhere in its render tree that matches the one passed in.

 
Example
--------

 
```
const wrapper = mount((
  <div>
    <div data-foo="foo" data-bar="bar">Hello</div>
  </div>
));

expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="bar">Hello</div>)).to.equal(true);
expect(wrapper.containsMatchingElement(<div data-foo="foo">Hello</div>)).to.equal(true);

expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="bar" data-baz="baz">Hello</div>)).to.equal(false);
expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="Hello">Hello</div>)).to.equal(false);
expect(wrapper.containsMatchingElement(<div data-foo="foo" data-bar="bar" />)).to.equal(false);

```
 
Common Gotchas
---------------

 * `.containsMatchingElement()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.

 
Related Methods
----------------

 * [`.containsAllMatchingElements() => ReactWrapper`](containsallmatchingelements) - must match all nodes in patternNodes
* [`.containsAnyMatchingElements() => ReactWrapper`](containsanymatchingelements) - must match at least one in patternNodes



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/containsMatchingElement.html>

.closest(selector) => ReactWrapper
==================================

 Returns a wrapper of the first element that matches the selector by traversing up through the wrapped node's ancestors in the tree, starting with itself. It must be a single-node wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the resulting node.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo).closest('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.children([selector]) => ReactWrapper`](children)
* [`.parent() => ReactWrapper`](parent)
* [`.parents([selector]) => ReactWrapper`](parents)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/closest.html>

.context([key]) => Any
======================

 Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.

 
Arguments
----------

 1. `key` (`String` [optional]): If provided, the return value will be the `this.context[key]` of the root component instance.

 
Example
--------

 
```
const wrapper = mount(
  <MyComponent />,
  { context: { foo: 10 } },
);

expect(wrapper.context().foo).to.equal(10);
expect(wrapper.context('foo')).to.equal(10);

```
 
Related Methods
----------------

 * [`.state([key]) => Any`](state)
* [`.props() => Object`](props)
* [`.prop(key) => Any`](prop)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/context.html>

.debug([options]) => String
===========================

 Returns an HTML-like string of the wrapper for debugging purposes. Useful to print out to the console when tests are not passing when you expect them to.

 
Arguments
----------

 `options` (`Object` [optional]):

 * `options.ignoreProps`: (`Boolean` [optional]): Whether props should be omitted in the resulting string. Props are included by default.
* `options.verbose`: (`Boolean` [optional]): Whether arrays and objects passed as props should be verbosely printed.

 
Returns
--------

 `String`: The resulting string.

 
Examples
---------

 Say we have the following components:

 
```
function Foo() {
  return (
    <div className="foo">
      <span>Foo</span>
    </div>
  );
}

function Bar() {
  return (
    <div className="bar">
      <span>Non-Foo</span>
      <Foo baz="bax" object={{ a: 1, b: 2 }} />
    </div>
  );
}

```
 In this case, running:

 
```
console.log(mount(<Bar id="2" />).debug());

```
 Would output the following to the console: 

 
```
<Bar id="2">
  <div className="bar">
    <span>
      Non-Foo
    </span>
    <Foo baz="bax" object={{...}}>
      <div className="foo">
        <span>
          Foo
        </span>
      </div>
    </Foo>
  </div>
</Bar>

```
 Likewise, running:

 
```
console.log(mount(<Bar id="2" />).find(Foo).debug());

```
 Would output the following to the console: 

 
```
<Foo baz="bax">
  <div className="foo">
    <span>
      Foo
    </span>
  </div>
</Foo>

```
 and:

 
```
console.log(mount(<Bar id="2" />).find(Foo).debug({ ignoreProps: true }));

```
 Would output the following to the console: 

 
```
<Foo>
  <div>
    <span>
      Foo
    </span>
  </div>
</Foo>

```
 and:

 
```
console.log(mount(<Bar id="2" />).find(Foo).debug({ verbose: true }));

```
 Would output the following to the console: 

 
```
<Foo baz="bax" object={{ a: 1, b: 2 }}>
  <div className="foo">
    <span>
      Foo
    </span>
  </div>
</Foo>

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/debug.html>

.detach() => void
=================

 Detaches the react tree from the DOM. Runs `ReactDOM.unmountComponentAtNode()` under the hood.

 This method will most commonly be used as a "cleanup" method if you decide to use the `attachTo` or `hydrateIn` option in `mount(node, options)`.

 The method is intentionally not "fluent" (in that it doesn't return `this`) because you should not be doing anything with this wrapper after this method is called.

 Using `attachTo`/`hydrateIn` is not generally recommended unless it is absolutely necessary to test something. It is your responsibility to clean up after yourself at the end of the test if you do decide to use it, though.

 
Examples
---------

 With the `attachTo` option, you can mount components to attached DOM elements:

 
```
// render a component directly into document.body
const wrapper = mount(<Bar />, { attachTo: document.body });

// Or, with the `hydrateIn` option, you can mount components on top of existing DOM elements:
// hydrate a component directly onto document.body
const hydratedWrapper = mount(<Bar />, { hydrateIn: document.body });

// we can see that the component is rendered into the document
expect(wrapper.find('.in-bar')).to.have.lengthOf(1);
expect(document.body.childNodes).to.have.lengthOf(1);

// detach it to clean up after yourself
wrapper.detach();

// now we can see that
expect(document.body.childNodes).to.have.lengthOf(0);

```
 Similarly, if you want to create some one-off elements for your test to mount into:

 
```
// create a div in the document to mount into
const div = global.document.createElement('div');
global.document.body.appendChild(div);

// div is empty. body has the div attached.
expect(document.body.childNodes).to.have.lengthOf(1);
expect(div.childNodes).to.have.lengthOf(0);

// mount a component passing div into the `attachTo` option
const wrapper = mount(<Foo />, { attachTo: div });
// or, mount a component passing div into the `hydrateIn` option
const hydratedWrapper = mount(<Foo />, { hydrateIn: div });

// we can see now the component is rendered into the document
expect(wrapper.find('.in-foo')).to.have.lengthOf(1);
expect(document.body.childNodes).to.have.lengthOf(1);
expect(div.childNodes).to.have.lengthOf(1);

// call detach to clean up
wrapper.detach();

// div is now empty, but still attached to the document
expect(document.body.childNodes).to.have.lengthOf(1);
expect(div.childNodes).to.have.lengthOf(0);

// remove div if you want
global.document.body.removeChild(div);

expect(document.body.childNodes).to.have.lengthOf(0);
expect(div.childNodes).to.have.lengthOf(0);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/detach.html>

.equals(node) => Boolean
========================

 Returns whether or not the current wrapper root node render tree looks like the one passed in.

 
Arguments
----------

 1. `node` (`ReactElement`): The node whose presence you are detecting in the current instance's render tree.

 
Returns
--------

 `Boolean`: whether or not the current wrapper has a node anywhere in it's render tree that looks like the one passed in.

 
Example
--------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.equals(<div className="foo bar" />)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.equals()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines equality based on the equality of the node's children as well.
* Following React's behavior, `.equals()` ignores properties whose values are `undefined`.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/equals.html>

.every(selector) => Boolean
===========================

 Returns whether or not all of the nodes in the wrapper match the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `Boolean`: True if every node in the current wrapper matched the provided selector.

 
Examples
---------

 
```
const wrapper = mount((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').every('.foo')).to.equal(true);
expect(wrapper.find('.foo').every('.qoo')).to.equal(false);
expect(wrapper.find('.foo').every('.bar')).to.equal(false);

```
 
Related Methods
----------------

 * [`.someWhere(predicate) => Boolean`](somewhere)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/every.html>

.everyWhere(fn) => Boolean
==========================

 Returns whether or not all of the nodes in the wrapper pass the provided predicate function.

 
Arguments
----------

 1. `predicate` (`ReactWrapper => Boolean`): A predicate function to match the nodes.

 
Returns
--------

 `Boolean`: True if every node in the current wrapper passed the predicate function.

 
Example
--------

 
```
const wrapper = mount((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('foo'))).to.equal(true);
expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('qoo'))).to.equal(false);
expect(wrapper.find('.foo').everyWhere((n) => n.hasClass('bar'))).to.equal(false);

```
 
Related Methods
----------------

 * [`.some(selector) => Boolean`](some)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/everyWhere.html>

.exists([selector]) => Boolean
==============================

 Returns whether or not any nodes exist in the wrapper. Or, if a selector is passed in, whether that selector has any matches in the wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector) [optional]): The selector to check existence for.

 
Returns
--------

 `Boolean`: whether or not any nodes are on the list, or the selector had any matches.

 
Example
--------

 
```
const wrapper = mount(<div className="some-class" />);
expect(wrapper.exists('.some-class')).to.equal(true);
expect(wrapper.find('.other-class').exists()).to.equal(false);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/exists.html>

.filter(selector) => ReactWrapper
=================================

 Returns a new wrapper with only the nodes of the current wrapper that match the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the filtered nodes.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.foo').filter('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.filterWhere(predicate) => ReactWrapper`](filterwhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/filter.html>

.filterWhere(fn) => ReactWrapper
================================

 Returns a new wrapper with only the nodes of the current wrapper that, when passed into the provided predicate function, return true.

 
Arguments
----------

 1. `predicate` (`ReactWrapper => Boolean`): A predicate function that is passed a wrapped node.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the filtered nodes.

 
Example
--------

 
```
const wrapper = mount(<MyComponent />);
const complexComponents = wrapper.find('.foo').filterWhere((n) => typeof n.type() !== 'string');
expect(complexComponents).to.have.lengthOf(4);

```
 
Related Methods
----------------

 * [`.filter(selector) => ReactWrapper`](filter)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/filterWhere.html>

.find(selector) => ReactWrapper
===============================

 Finds every node in the render tree of the current wrapper that matches the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the found nodes.

 
Examples
---------

 CSS Selectors:

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.foo')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(3);

// compound selector
expect(wrapper.find('div.some-class')).to.have.lengthOf(3);

// CSS id selector
expect(wrapper.find('#foo')).to.have.lengthOf(1);

// property selector
expect(wrapper.find('[htmlFor="checkbox"]')).to.have.lengthOf(1);

```
 Component Constructors:

 
```
import Foo from '../components/Foo';

const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo)).to.have.lengthOf(1);

```
 Component Display Name:

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find('Foo')).to.have.lengthOf(1);

```
 Object Property Selector:

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find({ prop: 'value' })).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.findWhere(predicate) => ReactWrapper`](findwhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/find.html>

.findWhere(fn) => ReactWrapper
==============================

 Finds every node in the render tree that returns true for the provided predicate function.

 
Arguments
----------

 1. `predicate` (`ReactWrapper => Boolean`): A predicate function called with the passed in wrapped nodes.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the found nodes.

 
Example
--------

 
```
const wrapper = mount(<MyComponent />);
const complexComponents = wrapper.findWhere((n) => typeof n.type() !== 'string');
expect(complexComponents).to.have.lengthOf(8);

```
 
Related Methods
----------------

 * [`.find(selector) => ReactWrapper`](find)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/findWhere.html>

.first() => ReactWrapper
========================

 Reduce the set of matched nodes to the first in the set, just like `.at(0)`.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the first node in the set.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo).first().props().foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.at(index) => ReactWrapper`](at) - retrieve any wrapper node
* [`.last() => ReactWrapper`](last)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/first.html>

.forEach(fn) => Self
====================

 Iterates through each node of the current wrapper and executes the provided function with a wrapper around the corresponding node passed in as the first argument.

 
Arguments
----------

 1. `fn` (`Function ( ReactWrapper node, Number index )`): A callback to be run for every node in the collection. Should expect a ReactWrapper as the first argument, and will be run with a context of the original instance.

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
const wrapper = mount((
  <div>
    <div className="foo bax" />
    <div className="foo bar" />
    <div className="foo baz" />
  </div>
));

wrapper.find('.foo').forEach((node) => {
  expect(node.hasClass('foo')).to.equal(true);
});

```
 
Related Methods
----------------

 * [`.map(fn) => ReactWrapper`](map)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/forEach.html>

.get(index) => ReactElement
===========================

 Returns the node at a given index of the current wrapper.

 
Arguments
----------

 1. `index` (`Number`): A zero-based integer indicating which node to retrieve.

 
Returns
--------

 `ReactElement`: The retrieved node.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo).get(0).props.foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.at(index) => ReactWrapper`](at) - same, but returns the React node in a single-node wrapper.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/get.html>

.getDOMNode() => DOMComponent
=============================

 Returns the outer most DOMComponent of the current wrapper.

 Notes:

 * can only be called on a wrapper of a single node.
* will raise if called on a wrapper of a stateless functional component.

 
Returns
--------

 `DOMComponent`: The retrieved DOM component.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.getDOMNode()).to.have.property('className');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/getDOMNode.html>

.getWrappingComponent() => ReactWrapper
=======================================

 If a `wrappingComponent` was passed in `options`, this methods returns a `ReactWrapper` around the rendered `wrappingComponent`. This `ReactWrapper` can be used to update the `wrappingComponent`'s props, state, etc.

 
Returns
--------

 `ReactWrapper`: A `ReactWrapper` around the rendered `wrappingComponent`

 
Examples
---------

 
```
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import store from './my/app/store';
import mockStore from './my/app/mockStore';

function MyProvider(props) {
  const { children, customStore } = props;

  return (
    <Provider store={customStore || store}>
      <Router>
        {children}
      </Router>
    </Provider>
  );
}
MyProvider.propTypes = {
  children: PropTypes.node,
  customStore: PropTypes.shape({}),
};
MyProvider.defaultProps = {
  children: null,
  customStore: null,
};

const wrapper = mount(<MyComponent />, {
  wrappingComponent: MyProvider,
});
const provider = wrapper.getWrappingComponent();
provider.setProps({ customStore: mockStore });

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/getWrappingComponent.html>

.hasClass(className) => Boolean
===============================

 Returns whether or not the wrapped node has a `className` prop including the passed in class name. It must be a single-node wrapper.

 
Arguments
----------

 1. `className` (`String` | `RegExp`): A single class name or a regex expression.

 
Returns
--------

 `Boolean`: whether or not the wrapped node has found the class name.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

```
 
```
// Searching using RegExp works fine when classes were injected by a jss decorator
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass(/(ComponentName)-(other)-(\d+)/)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.hasClass()` expects a class name, NOT a CSS selector. `.hasClass('.foo')` should be `.hasClass('foo')`



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/hasClass.html>

.hostNodes() => ReactWrapper
============================

 Returns a new wrapper with only host nodes. When using `react-dom`, host nodes are HTML elements rather than custom React components, e.g. `<div>` versus `<MyComponent>`.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the filtered nodes.

 
Examples
---------

 The following code takes a wrapper with two nodes, one a `<MyComponent>` React component, and the other a `<span>`, and filters out the React component.

 
```
const wrapper = mount((
  <div>
    <MyComponent className="foo" />
    <span className="foo" />
  </div>
));
const twoNodes = wrapper.find('.foo');
expect(twoNodes.hostNodes()).to.have.lengthOf(1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/hostNodes.html>

.html() => String
=================

 Returns a string of the rendered HTML markup of the current render tree. See also [`.debug()`](debug)

 Note: can only be called on a wrapper of a single node.

 
Returns
--------

 `String`: The resulting HTML string

 
Examples
---------

 
```
function Foo() {
  return (<div className="in-foo" />);
}

```
 
```
function Bar() {
  return (
    <div className="in-bar">
      <Foo />
    </div>
  );
}

```
 
```
const wrapper = mount(<Bar />);
expect(wrapper.html()).to.equal('<div class="in-bar"><div class="in-foo"></div></div>');
expect(wrapper.find(Foo).html()).to.equal('<div class="in-foo"></div>');

```
 
```
const wrapper = mount(<div><b>important</b></div>);
expect(wrapper.html()).to.equal('<div><b>important</b></div>');

```
 
Related Methods
----------------

 [`.text() => String`](text)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/html.html>

.instance() => ReactComponent
=============================

 Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.

 NOTE: With React `16` and above, `instance()` returns `null` for stateless functional components.

 
Returns
--------

 `ReactComponent|DOMComponent`: The retrieved instance.

 
Example
--------

 
```
function Stateless() {
  return <div>Stateless</div>;
}

class Stateful extends React.Component {
  render() {
    return <div>Stateful</div>;
  }
}

```
 
React 16.x
-----------

 
```
test('shallow wrapper instance should be null', () => {
  const wrapper = mount(<Stateless />);
  const instance = wrapper.instance();

  expect(instance).to.equal(null);
});

test('shallow wrapper instance should not be null', () => {
  const wrapper = mount(<Stateful />);
  const instance = wrapper.instance();

  expect(instance).to.be.instanceOf(Stateful);
});

```
 
React 15.x
-----------

 
```
test('shallow wrapper instance should not be null', () => {
  const wrapper = mount(<Stateless />);
  const instance = wrapper.instance();

  expect(instance).to.be.instanceOf(Stateless);
});

test('shallow wrapper instance should not be null', () => {
  const wrapper = mount(<Stateful />);
  const instance = wrapper.instance();

  expect(instance).to.be.instanceOf(Stateful);
});

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/instance.html>

.invoke(propName)(...args) => Any
=================================

 Invokes a function prop. Note that in React 16.8+, `.invoke` will wrap your handler with [`ReactTestUtils.act`](https://reactjs.org/docs/test-utils.html#act) and call `.update()` automatically.

 
Arguments
----------

 1. `propName` (`String`): The function prop that is invoked
2. `...args` (`Any` [optional]): Arguments that is passed to the prop function

 
Returns
--------

 `Any`: Returns the value from the prop function

 
Example
--------

 
```
class Foo extends React.Component {
  loadData() {
    return fetch();
  }

  render() {
    return (
      <div>
        <button
          type="button"
          onClick={() => this.loadData()}
        >
          Load more
        </button>
      </div>
    );
  }
}
const wrapper = mount(<Foo />);
wrapper.find('button').invoke('onClick')().then(() => {
  // expect()
});

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/invoke.html>

.is(selector) => Boolean
========================

 Returns whether or not the single wrapped node matches the provided selector. It must be a single-node wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `Boolean`: whether or not the wrapped node matches the provided selector.

 
Example
--------

 
```
const wrapper = mount(<div className="some-class other-class" />);
expect(wrapper.is('.some-class')).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/is.html>

.isEmpty() => Boolean
=====================

 **Deprecated**: Use [`.exists()`](exists) instead.

 Returns whether or not the wrapper is empty.

 
Returns
--------

 `Boolean`: whether or not the wrapper is empty.

 
Example
--------

 
```
const wrapper = mount(<div className="some-class" />);
expect(wrapper.find('.other-class').isEmpty()).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/isEmpty.html>

.isEmptyRender() => Boolean
===========================

 Returns whether or not the wrapper would ultimately render only the allowed falsy values: `false` or `null`.

 
Returns
--------

 `Boolean`: whether the return is falsy

 
Example
--------

 
```
function Foo() {
  return null;
}

const wrapper = mount(<Foo />);
expect(wrapper.isEmptyRender()).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/isEmptyRender.html>

.key() => String
================

 Returns the key value for the node of the current wrapper. It must be a single-node wrapper.

 
Example
--------

 
```
const wrapper = mount((
  <ul>
    {['foo', 'bar'].map((s) => <li key={s}>{s}</li>)}
  </ul>
)).find('li');
expect(wrapper.at(0).key()).to.equal('foo');
expect(wrapper.at(1).key()).to.equal('bar');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/key.html>

.last() => ReactWrapper
=======================

 Reduce the set of matched nodes to the last in the set, just like `.at(length - 1)`.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the last node in the set.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find(Foo).last().props().foo).to.equal('bar');

```
 
Related Methods
----------------

 * [`.at(index) => ReactWrapper`](at) - retrieve a wrapper node by index
* [`.first() => ReactWrapper`](first)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/last.html>

.map(fn) => Array<Any>
======================

 Maps the current array of nodes to another array. Each node is passed in as a `ReactWrapper` to the map function.

 
Arguments
----------

 1. `fn` (`Function ( ReactWrapper node, Number index ) => Any`): A mapping function to be run for every node in the collection, the results of which will be mapped to the returned array. Should expect a ReactWrapper as the first argument, and will be run with a context of the original instance.

 
Returns
--------

 `Array<Any>`: Returns an array of the returned values from the mapping function..

 
Example
--------

 
```
const wrapper = mount((
  <div>
    <div className="foo">bax</div>
    <div className="foo">bar</div>
    <div className="foo">baz</div>
  </div>
));

const texts = wrapper.find('.foo').map((node) => node.text());
expect(texts).to.eql(['bax', 'bar', 'baz']);

```
 
Related Methods
----------------

 * [`.forEach(fn) => ReactWrapper`](foreach)
* [`.reduce(fn[, initialValue]) => Any`](reduce)
* [`.reduceRight(fn[, initialValue]) => Any`](reduceright)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/map.html>

.matchesElement(patternNode) => Boolean
=======================================

 Returns whether or not a given react element `patternNode` matches the wrapper's render tree. It must be a single-node wrapper, and only the root node is checked.

 The `patternNode` acts like a wildcard. For it to match a node in the wrapper:

 * tag names must match
* contents must match: In text nodes, leading and trailing spaces are ignored, but not space in the middle. Child elements must match according to these rules, recursively.
* `patternNode` props (attributes) must appear in the wrapper's nodes, but not the other way around. Their values must match if they do appear.
* `patternNode` style CSS properties must appear in the wrapper's node's style, but not the other way around. Their values must match if they do appear.

 
Arguments
----------

 1. `patternNode` (`ReactElement`): The node whose presence you are detecting in the wrapper's single node.

 
Returns
--------

 `Boolean`: whether or not the current wrapper match the one passed in.

 
Example
--------

 
```
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // ...
  }

  render() {
    return (
      <button type="button" onClick={this.handleClick} className="foo bar">Hello</button>
    );
  }
}

const wrapper = mount(<MyComponent />);
expect(wrapper.matchesElement(<button>Hello</button>)).to.equal(true);
expect(wrapper.matchesElement(<button className="foo bar">Hello</button>)).to.equal(true);

```
 
Common Gotchas
---------------

 * `.matchesElement()` expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
* Keep in mind that this method determines matching based on the matching of the node's children as well.

 
Related Methods
----------------

 * [`.containsMatchingElement() => ReactWrapper`](containsmatchingelement) - searches all nodes in the wrapper, and searches their entire depth



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/matchesElement.html>

.mount() => Self
================

 A method that re-mounts the component, if it is not currently mounted. This can be used to simulate a component going through an unmount/mount lifecycle.

 No equivalent for ShallowWrappers.

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
import PropTypes from 'prop-types';
import sinon from 'sinon';

const willMount = sinon.spy();
const didMount = sinon.spy();
const willUnmount = sinon.spy();

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.componentWillUnmount = willUnmount;
    this.componentWillMount = willMount;
    this.componentDidMount = didMount;
  }

  render() {
    const { id } = this.props;
    return (
      <div className={id}>
        {id}
      </div>
    );
  }
}
Foo.propTypes = {
  id: PropTypes.string.isRequired,
};

const wrapper = mount(<Foo id="foo" />);
expect(willMount).to.have.property('callCount', 1);
expect(didMount).to.have.property('callCount', 1);
expect(willUnmount).to.have.property('callCount', 0);
wrapper.unmount();
expect(willMount).to.have.property('callCount', 1);
expect(didMount).to.have.property('callCount', 1);
expect(willUnmount).to.have.property('callCount', 1);
wrapper.mount();
expect(willMount).to.have.property('callCount', 2);
expect(didMount).to.have.property('callCount', 2);
expect(willUnmount).to.have.property('callCount', 1);

```
 
Related Methods
----------------

 * [`.unmount() => Self`](unmount)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/mount.html>

.name() => String|null
======================

 Returns the name of the current node of this wrapper. If it's a composite component, this will be the name of the component. If it's a native DOM node, it will be a string of the tag name. If it's `null`, it will be `null`.

 The order of precedence on returning the name is: `type.displayName` -> `type.name` -> `type`.

 Note: can only be called on a wrapper of a single node.

 
Returns
--------

 `String|null`: The name of the current node

 
Examples
---------

 
```
const wrapper = mount(<div />);
expect(wrapper.name()).to.equal('div');

```
 
```
const wrapper = mount(<Foo />);
expect(wrapper.name()).to.equal('Foo');

```
 
```
Foo.displayName = 'A cool custom name';
const wrapper = mount(<Foo />);
expect(wrapper.name()).to.equal('A cool custom name');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/name.html>

.not(selector) => ReactWrapper
==============================

 Returns a new wrapper with only the nodes of the current wrapper that don't match the provided selector.

 This method is effectively the negation or inverse of [`filter`](filter).

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the filtered nodes.

 
Examples
---------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.foo').not('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.filterWhere(predicate) => ReactWrapper`](filterwhere)
* [`.filter(selector) => ReactWrapper`](filter)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/not.html>

.parent() => ReactWrapper
=========================

 Returns a wrapper with the direct parent of the node in the current wrapper.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the resulting nodes.

 
Examples
---------

 
```
const wrapper = mount(<ToDoList />);
expect(wrapper.find('ul').parent().is('div')).to.equal(true);

```
 
Related Methods
----------------

 * [`.parents([selector]) => ReactWrapper`](parents)
* [`.children([selector]) => ReactWrapper`](children)
* [`.closest(selector) => ReactWrapper`](closest)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/parent.html>

.parents([selector]) => ReactWrapper
====================================

 Returns a wrapper around all of the parents/ancestors of the single node in the wrapper. Does not include the node itself. Optionally, a selector can be provided and it will filter the parents by this selector. It must be a single-node wrapper.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector) [optional]): The selector to filter the parents by.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the resulting nodes.

 
Examples
---------

 
```
const wrapper = mount(<ToDoList />);
expect(wrapper.find('ul').parents()).to.have.lengthOf(2);

```
 
Related Methods
----------------

 * [`.children([selector]) => ReactWrapper`](children)
* [`.parent() => ReactWrapper`](parent)
* [`.closest(selector) => ReactWrapper`](closest)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/parents.html>

.prop(key) => Any
=================

 Returns the prop value for the root node of the wrapper with the provided key. It must be a single-node wrapper.

 
Arguments
----------

 1. `key` (`String`): The prop name, that is, `this.props[key]` or `props[key]` for the root node of the wrapper.

 
Example
--------

 
```
const wrapper = mount(<MyComponent foo={10} />);
expect(wrapper.prop('foo')).to.equal(10);

```
 
Related Methods
----------------

 * [`.props() => Object`](props)
* [`.state([key]) => Any`](state)
* [`.context([key]) => Any`](context)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/prop.html>

.props() => Object
==================

 Returns the props object for the root node of the wrapper. It must be a single-node wrapper.

 This method is a reliable way of accessing the props of a node; `wrapper.instance().props` will work as well, but in React 16+, stateless functional components do not have an instance. See [`.instance() => ReactComponent`](instance)

 
Example
--------

 
```

import PropTypes from 'prop-types';

function MyComponent(props) {
  const { includedProp } = props;
  return (
    <div className="foo bar" includedProp={includedProp}>Hello</div>
  );
}
MyComponent.propTypes = {
  includedProp: PropTypes.string.isRequired,
};

const wrapper = mount(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
expect(wrapper.props().includedProp).to.equal('Success!');

// Warning: .props() only returns props that are passed to the root node,
// which does not include excludedProp in this example.
// See the note above about wrapper.instance().props.

console.log(wrapper.props());
// {children: "Hello", className: "foo bar", includedProp="Success!"}

console.log(wrapper.instance().props); // React 15.x - working as expected
// {children: "Hello", className: "foo bar", includedProp:"Success!", excludedProp: "I'm not included"}

console.log(wrapper.instance().props);
// React 16.* - Uncaught TypeError: Cannot read property 'props' of null

```
 
Related Methods
----------------

 * [`.prop(key) => Any`](prop)
* [`.state([key]) => Any`](state)
* [`.context([key]) => Any`](context)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/props.html>

.reduce(fn[, initialValue]) => Any
==================================

 Applies the provided reducing function to every node in the wrapper to reduce to a single value. Each node is passed in as a `ReactWrapper`, and is processed from left to right.

 
Arguments
----------

 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the following arguments:


	* `value` (`T`): The value returned by the previous invocation of this function
	* `node` (`ReactWrapper`): A wrapper around the node being processed
	* `index` (`Number`): The index of the node being processed
2. `initialValue` (`T` [optional]): If provided, this will be passed in as the first argument to the first invocation of the reducing function. If omitted, the first `node` will be provided and the iteration will begin on the second node in the collection.

 
Returns
--------

 `T`: Returns an array of the returned values from the mapping function...

 
Example
--------

 
```
function Foo() {
  return (
    <div>
      <Bar amount={2} />
      <Bar amount={4} />
      <Bar amount={8} />
    </div>
  );
}

```
 
```
const wrapper = mount(<Foo />);
const total = wrapper.find(Bar).reduce((amount, n) => amount + n.prop('amount'), 0);
expect(total).to.equal(14);

```
 
Related Methods
----------------

 * [`.reduceRight(fn[, initialValue]) => Any`](reduceright)
* [`.forEach(fn) => ReactWrapper`](foreach)
* [`.map(fn) => Array<Any>`](map)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/reduce.html>

.reduceRight(fn[, initialValue]) => Any
=======================================

 Applies the provided reducing function to every node in the wrapper to reduce to a single value. Each node is passed in as a `ReactWrapper`, and is processed from right to left.

 
Arguments
----------

 1. `fn` (`Function`): A reducing function to be run for every node in the collection, with the following arguments:


	* `value` (`T`): The value returned by the previous invocation of this function
	* `node` (`ReactWrapper`): A single-node wrapper around the node being processed
	* `index` (`Number`): The index of the node being processed
2. `initialValue` (`T` [optional]): If provided, this will be passed in as the first argument to the first invocation of the reducing function. If omitted, the first `node` will be provided and the iteration will begin on the second node in the collection.

 
Returns
--------

 `T`: Returns an array of the returned values from the mapping function...

 
Example
--------

 
```
function Foo() {
  return (
    <div>
      <Bar amount={2} />
      <Bar amount={4} />
      <Bar amount={8} />
    </div>
  );
}

```
 
```
const wrapper = mount(<Foo />);
const total = wrapper.find(Bar).reduceRight((amount, n) => amount + n.prop('amount'), 0);
expect(total).to.equal(14);

```
 
Related Methods
----------------

 * [`.reduce(fn[, initialValue]) => Any`](reduce)
* [`.forEach(fn) => ReactWrapper`](foreach)
* [`.map(fn) => Array<Any>`](map)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/reduceRight.html>

.ref(refName) => ReactComponent | HTMLElement
=============================================

 Returns the node that matches the provided reference name.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `refName` (`String`): The ref attribute of the node

 
Returns
--------

 `ReactComponent | HTMLElement`: The node that matches the provided reference name. This can be a react component instance, or an HTML element instance.

 
Examples
---------

 
```
class Foo extends React.Component {
  render() {
    return (
      <div>
        <span ref="firstRef" amount={2}>First</span>
        <span ref="secondRef" amount={4}>Second</span>
        <span ref="thirdRef" amount={8}>Third</span>
      </div>
    );
  }
}

```
 
```
const wrapper = mount(<Foo />);
expect(wrapper.ref('secondRef').innerText).to.equal('Second');

```
 
Related Methods
----------------

 * [`.find(selector) => ReactWrapper`](find)
* [`.findWhere(predicate) => ReactWrapper`](findwhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/ref.html>

.render() => CheerioWrapper
===========================

 Returns a CheerioWrapper around the rendered HTML of the single node's subtree. It must be a single-node wrapper.

 
Returns
--------

 `CheerioWrapper`: The resulting Cheerio object

 
Examples
---------

 
```
function Foo() {
  return (<div className="in-foo" />);
}

```
 
```
function Bar() {
  return (
    <div className="in-bar">
      <Foo />
    </div>
  );
}

```
 
```
const wrapper = mount(<Bar />);
expect(wrapper.find(Foo).render().find('.in-foo')).to.have.lengthOf(1);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/render.html>

.renderProp(propName)(...args) => ReactWrapper
==============================================

 Returns a function that, when called with arguments `args`, will return a new wrapper based on the render prop in the original wrapper's prop `propName`.

 NOTE: can only be called on wrapper of a single non-DOM component element node.

 
Arguments
----------

 1. `propName` (`String`):
2. `...args` (`Array<Any>`):

 This essentially calls `wrapper.prop(propName)(...args)`.

 
Returns
--------

 `ReactWrapper`: A new wrapper that wraps the node returned from the render prop.

 
Examples
---------

 ##### 
Test Setup

 
```
class Mouse extends React.Component {
  constructor() {
    super();
    this.state = { x: 0, y: 0 };
  }

  render() {
    const { render } = this.props;
    return (
      <div
        style={{ height: '100%' }}
        onMouseMove={(event) => {
          this.setState({
            x: event.clientX,
            y: event.clientY,
          });
        }}
      >
        {render(this.state)}
      </div>
    );
  }
}

Mouse.propTypes = {
  render: PropTypes.func.isRequired,
};

```
 
```
const App = () => (
  <div style={{ height: '100%' }}>
    <Mouse
      render={(x = 0, y = 0) => (
        <h1>
          The mouse position is ({x}, {y})
        </h1>
      )}
    />
  </div>
);

```
 ##### 
Testing with no arguments

 
```
const wrapper = mount(<App />)
  .find(Mouse)
  .renderProp('render')();

expect(wrapper.equals(<h1>The mouse position is 0, 0</h1>)).to.equal(true);

```
 ##### 
Testing with multiple arguments

 
```
const wrapper = mount(<App />)
  .find(Mouse)
  .renderProp('render')(10, 20);

expect(wrapper.equals(<h1>The mouse position is 10, 20</h1>)).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/renderProp.html>

.setContext(context) => Self
============================

 A method that sets the context of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing contexts.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `context` (`Object`): An object containing new props to merge in with the current state

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
import React from 'react';
import PropTypes from 'prop-types';

function SimpleComponent(props, context) {
  const { name } = context;
  return <div>{name}</div>;
}
SimpleComponent.contextTypes = {
  name: PropTypes.string,
};

```
 
```
const context = { name: 'foo' };
const wrapper = mount(<SimpleComponent />, { context });
expect(wrapper.text()).to.equal('foo');
wrapper.setContext({ name: 'bar' });
expect(wrapper.text()).to.equal('bar');
wrapper.setContext({ name: 'baz' });
expect(wrapper.text()).to.equal('baz');

```
 
Common Gotchas
---------------

 * `.setContext()` can only be used on a wrapper that was initially created with a call to `mount()` that includes a `context` specified in the options argument.
* The root component you are rendering must have a `contextTypes` static property.

 
Related Methods
----------------

 * [`.setState(state[, callback]) => Self`](setstate)
* [`.setProps(props[, callback]) => Self`](setprops)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/setContext.html>

.setProps(nextProps[, callback]) => Self
========================================

 A method that sets the props of the root component, and re-renders. Useful for when you are wanting to test how the component behaves over time with changing props. Calling this, for instance, will call the `componentWillReceiveProps` lifecycle method.

 Similar to `setState`, this method accepts a props object and will merge it in with the already existing props.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `nextProps` (`Object`): An object containing new props to merge in with the current props
2. `callback` (`Function` [optional]): If provided, the callback function will be executed once setProps has completed

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
import React from 'react';
import PropTypes from 'prop-types';

function Foo({ name }) {
  return (
    <div className={name} />
  );
}
Foo.propTypes = {
  name: PropTypes.string.isRequired,
};

```
 
```
const wrapper = mount(<Foo name="foo" />);
expect(wrapper.find('.foo')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(0);
wrapper.setProps({ name: 'bar' });
expect(wrapper.find('.foo')).to.have.lengthOf(0);
expect(wrapper.find('.bar')).to.have.lengthOf(1);

```
 
```
import sinon from 'sinon';

const spy = sinon.spy(MyComponent.prototype, 'componentWillReceiveProps');

const wrapper = mount(<MyComponent foo="bar" />);
expect(spy).to.have.property('callCount', 0);
wrapper.setProps({ foo: 'foo' });
expect(spy).to.have.property('callCount', 1);

```
 
Related Methods
----------------

 * [`.setState(state) => Self`](setstate)
* [`.setContext(context) => Self`](setcontext)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/setProps.html>

.setState(nextState[, callback]) => Self
========================================

 A method to invoke `setState()` on the root component instance, similar to how you might in the methods of the component, and re-renders. This method is useful for testing your component in hard-to-achieve states, however should be used sparingly. If possible, you should utilize your component's external API (which is often accessible via [`.instance()`](instance)) in order to get it into whatever state you want to test, in order to be as accurate of a test as possible. This is not always practical, however.

 NOTE: Prior to v3.8.0 of enzyme, can only be called on a wrapper instance that is also the root instance.

 
Arguments
----------

 1. `nextState` (`Object`): An object containing new state to merge in with the current state
2. `callback` (`Function` [optional]): If provided, the callback function will be executed once setState has completed

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'foo' };
  }

  render() {
    const { name } = this.state;
    return (
      <div className={name} />
    );
  }
}

```
 
```
const wrapper = mount(<Foo />);
expect(wrapper.find('.foo')).to.have.lengthOf(1);
expect(wrapper.find('.bar')).to.have.lengthOf(0);
wrapper.setState({ name: 'bar' });
expect(wrapper.find('.foo')).to.have.lengthOf(0);
expect(wrapper.find('.bar')).to.have.lengthOf(1);

```
 
Related Methods
----------------

 * [`.setProps(props[, callback]) => Self`](setprops)
* [`.setContext(context) => Self`](setcontext)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/setState.html>

.simulate(event[, mock]) => Self
================================

 Simulate events on the root node in the wrapper. It must be a single-node wrapper.

 
Arguments
----------

 1. `event` (`String`): The event name to be simulated
2. `mock` (`Object` [optional]): A mock event object that will be merged with the event object passed to the handlers.

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example `class component`
--------------------------

 
```
class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <div className={`clicks-${count}`}>
          {count} clicks
        </div>
        <a href="url" onClick={() => { this.setState({ count: count + 1 }); }}>
          Increment
        </a>
      </div>
    );
  }
}

const wrapper = mount(<Foo />);

expect(wrapper.find('.clicks-0').length).to.equal(1);
wrapper.find('a').simulate('click');
expect(wrapper.find('.clicks-1').length).to.equal(1);

```
 
Example `functional component`
-------------------------------

 
```
const Foo = ({ width, height, onChange }) => (
  <div>
    <input name="width" value={width} onChange={onChange} />
    <input name="height" value={height} onChange={onChange} />
  </div>
);
Foo.propTypes = {
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  onChange: PropTypes.func.isRequired,
};

const testState = { width: 10, height: 20 };
const wrapper = mount((
  <Foo
    width={testState.width}
    height={testState.height}
    onChange={(e) => {
      testState[e.target.name] = e.target.value;
    }}
  />
));

expect(wrapper.find('input').at(0).prop('value')).toEqual(10);
expect(wrapper.find('input').at(1).prop('value')).toEqual(20);
wrapper.find('input').at(0).simulate('change', { target: { name: 'width', value: 50 } });
wrapper.find('input').at(1).simulate('change', { target: { name: 'height', value: 70 } });
expect(testState.width).toEqual(50);
expect(testState.height).toEqual(70);

```
 
Common Gotchas
---------------

 * As noted in the function signature above passing a mock event is optional. It is worth noting that `ReactWrapper` will pass a `SyntheticEvent` object to the event handler in your code. Keep in mind that if the code you are testing uses properties that are not included in the `SyntheticEvent`, for instance `event.target.value`, you will need to provide a mock event like so `.simulate("change", { target: { value: "foo" }})` for it to work.



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/simulate.html>

.simulateError(error) => Self
=============================

 Simulate a component throwing an error as part of its rendering lifecycle.

 This is particularly useful in combination with React 16 error boundaries (ie, the `componentDidCatch` and `static getDerivedStateFromError` lifecycle methods).

 
Arguments
----------

 1. `error` (`Any`): The error to throw.

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
function Something() {
  // this is just a placeholder
  return null;
}

class ErrorBoundary extends React.Component {
  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    const { spy } = this.props;
    spy(error, info);
  }

  render() {
    const { children } = this.props;
    const { hasError } = this.state;
    return (
      <React.Fragment>
        {hasError ? 'Error' : children}
      </React.Fragment>
    );
  }
}
ErrorBoundary.propTypes = {
  children: PropTypes.node.isRequired,
  spy: PropTypes.func.isRequired,
};

const spy = sinon.spy();
const wrapper = mount(<ErrorBoundary spy={spy}><Something /></ErrorBoundary>);
const error = new Error('hi!');
wrapper.find(Something).simulateError(error);

expect(wrapper.state()).to.have.property('hasError', true);
expect(spy).to.have.property('callCount', 1);
expect(spy.args).to.deep.equal([
  error,
  {
    componentStack: `
    in Something (created by ErrorBoundary)
    in ErrorBoundary (created by WrapperComponent)
    in WrapperComponent`,
  },
]);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/simulateError.html>

.slice([begin[, end]]) => ReactWrapper
======================================

 Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.

 
Arguments
----------

 1. `begin` (`Number` [optional]): Index from which to slice (defaults to `0`). If negative, this is treated as `length+begin`.
2. `end` (`Number` [optional]): Index at which to end slicing (defaults to `length`). If negative, this is treated as `length+end`.

 
Returns
--------

 `ReactWrapper`: A new wrapper with the subset of nodes specified.

 
Examples
---------

 
```
const wrapper = mount((
  <div>
    <div className="foo bax" />
    <div className="foo bar" />
    <div className="foo baz" />
  </div>
));
expect(wrapper.find('.foo').slice(1)).to.have.lengthOf(2);
expect(wrapper.find('.foo').slice(1).at(0).hasClass('bar')).to.equal(true);
expect(wrapper.find('.foo').slice(1).at(1).hasClass('baz')).to.equal(true);

```
 
```
const wrapper = mount((
  <div>
    <div className="foo bax" />
    <div className="foo bar" />
    <div className="foo baz" />
  </div>
));
expect(wrapper.find('.foo').slice(1, 2)).to.have.lengthOf(1);
expect(wrapper.find('.foo').slice(1, 2).at(0).hasClass('bar')).to.equal(true);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/slice.html>

.some(selector) => Boolean
==========================

 Returns whether or not any of the nodes in the wrapper match the provided selector.

 
Arguments
----------

 1. `selector` ([`EnzymeSelector`](../selector)): The selector to match.

 
Returns
--------

 `Boolean`: True if at least one of the nodes in the current wrapper matched the provided selector.

 
Examples
---------

 
```
const wrapper = mount((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').some('.qoo')).to.equal(true);
expect(wrapper.find('.foo').some('.foo')).to.equal(true);
expect(wrapper.find('.foo').some('.bar')).to.equal(false);

```
 
Related Methods
----------------

 * [`.someWhere(predicate) => Boolean`](somewhere)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/some.html>

.someWhere(fn) => Boolean
=========================

 Returns whether or not any of the nodes in the wrapper pass the provided predicate function.

 
Arguments
----------

 1. `predicate` (`ReactWrapper => Boolean`): A predicate function to match the nodes.

 
Returns
--------

 `Boolean`: True if at least one of the nodes in the current wrapper passed the predicate function.

 
Example
--------

 
```
const wrapper = mount((
  <div>
    <div className="foo qoo" />
    <div className="foo boo" />
    <div className="foo hoo" />
  </div>
));
expect(wrapper.find('.foo').someWhere((n) => n.hasClass('qoo'))).to.equal(true);
expect(wrapper.find('.foo').someWhere((n) => n.hasClass('foo'))).to.equal(true);
expect(wrapper.find('.foo').someWhere((n) => n.hasClass('bar'))).to.equal(false);

```
 
Related Methods
----------------

 * [`.some(selector) => Boolean`](some)
* [`.every(selector) => Boolean`](every)
* [`.everyWhere(predicate) => Boolean`](everywhere)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/someWhere.html>

.state([key]) => Any
====================

 Returns the state hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.

 
Arguments
----------

 1. `key` (`String` [optional]): If provided, the return value will be the `this.state[key]` of the root component instance.

 
Example
--------

 
```
const wrapper = mount(<MyComponent />);
expect(wrapper.state().foo).to.equal(10);
expect(wrapper.state('foo')).to.equal(10);

```
 
Related Methods
----------------

 * [`.props() => Object`](props)
* [`.prop(key) => Any`](prop)
* [`.context([key]) => Any`](context)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/state.html>

.tap(intercepter) => Self
=========================

 Invokes intercepter and returns itself. intercepter is called with itself. This is helpful when debugging nodes in method chains.

 
Arguments
----------

 1. `intercepter` (`Self`): the current ReactWrapper instance.

 
Returns
--------

 `Self`: the current ReactWrapper instance.

 
Example
--------

 
```
const result = mount((
  <ul>
    <li>xxx</li>
    <li>yyy</li>
    <li>zzz</li>
  </ul>
)).find('li')
  .tap((n) => console.log(n.debug()))
  .map((n) => n.text());

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/tap.html>

.text() => String
=================

 Returns a string of the rendered text of the current render tree. This function should be looked at with skepticism if being used to test what the actual HTML output of the component will be. If that is what you would like to test, use enzyme's `render` function instead.

 Note: can only be called on a wrapper of a single node.

 
Returns
--------

 `String`: The resulting string

 
Examples
---------

 
```
const wrapper = mount(<div><b>important</b></div>);
expect(wrapper.text()).to.equal('important');

```
 
```
function Foo() {
  return <div>This is</div>;
}

const wrapper = mount(<div><Foo /> <b>really</b> important</div>);
expect(wrapper.text()).to.equal('This is really important');

```
 
Related Methods
----------------

 [`.html() => String`](html)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/text.html>

.type() => String | Function | null
===================================

 Returns the type of the only node of this wrapper. If it's a React component, this will be the component constructor. If it's a native DOM node, it will be a string with the tag name. If it's `null`, it will be `null`. It must be a single-node wrapper.

 
Returns
--------

 `String | Function | null`: The type of the node

 
Examples
---------

 
```
function Foo() {
  return <div />;
}
const wrapper = mount(<Foo />);
expect(wrapper.type()).to.equal('div');

```
 
```
function Foo() {
  return (
    <div>
      <button type="button" className="btn">Button</button>
    </div>
  );
}
const wrapper = mount(<Foo />);
expect(wrapper.find('.btn').type()).to.equal('button');

```
 
```
function Foo() {
  return <Bar />;
}
const wrapper = mount(<Foo />);
expect(wrapper.type()).to.equal(Bar);

```
 
```
function Null() {
  return null;
}
const wrapper = mount(<Null />);
expect(wrapper.type()).to.equal(null);

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/type.html>

.unmount() => Self
==================

 A method that unmounts the component. This can be used to simulate a component going through an unmount/mount lifecycle.

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
import PropTypes from 'prop-types';
import sinon from 'sinon';

const willMount = sinon.spy();
const didMount = sinon.spy();
const willUnmount = sinon.spy();

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.componentWillUnmount = willUnmount;
    this.componentWillMount = willMount;
    this.componentDidMount = didMount;
  }

  render() {
    const { id } = this.props;
    return (
      <div className={id}>
        {id}
      </div>
    );
  }
}
Foo.propTypes = {
  id: PropTypes.string.isRequired,
};
const wrapper = mount(<Foo id="foo" />);
expect(willMount).to.have.property('callCount', 1);
expect(didMount).to.have.property('callCount', 1);
expect(willUnmount).to.have.property('callCount', 0);
wrapper.unmount();
expect(willMount).to.have.property('callCount', 1);
expect(didMount).to.have.property('callCount', 1);
expect(willUnmount).to.have.property('callCount', 1);

```
 
Related Methods
----------------

 * [`.mount() => Self`](mount)



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/unmount.html>

.update() => Self
=================

 Syncs the enzyme component tree snapshot with the react component tree. Useful to run before checking the render output if something external may be updating the state of the component somewhere.

 NOTE: can only be called on a wrapper instance that is also the root instance.

 NOTE: this does not force a re-render. Use `wrapper.setProps({})` to force a re-render.

 
Returns
--------

 `ReactWrapper`: Returns itself.

 
Example
--------

 
```
class ImpureRender extends React.Component {
  constructor(props) {
    super(props);
    this.count = 0;
  }

  render() {
    this.count += 1;
    return <div>{this.count}</div>;
  }
}

```
 
```
const wrapper = mount(<ImpureRender />);
expect(wrapper.text()).to.equal('0');
wrapper.update();
expect(wrapper.text()).to.equal('1');

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/update.html>

Static Rendering API
====================

 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`](mount) and [`shallow`](shallow); however, `render` uses a third party HTML parsing and traversal library [Cheerio](http://cheeriojs.github.io/cheerio/). We believe that Cheerio handles parsing and traversing HTML extremely well, and duplicating this functionality ourselves would be a disservice.

 For the purposes of this documentation, we will refer to Cheerio's constructor as `CheerioWrapper`, which is to say that it is analogous to our `ReactWrapper` and `ShallowWrapper` constructors. You can reference the [Cheerio API docs](https://github.com/cheeriojs/cheerio#api) for methods available on a `CheerioWrapper` instance.

 
Example Usage
--------------

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

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

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

  it('renders a div', () => {
    const wrapper = render(<div className="myClass" />);
    expect(wrapper.html()).to.contain('div');
  });

  it('can pass in context', () => {
    function SimpleComponent(props, context) {
      const { name } = context;
      return <div>{name}</div>;
    }
    SimpleComponent.contextTypes = {
      name: PropTypes.string,
    };

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

```


 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/render.html>

enzyme Selectors
================

 Many methods in enzyme’s API accept a *selector* as an argument. You can select several different ways:

 
1. A Valid CSS Selector
------------------------

 enzyme supports a subset of valid CSS selectors to find nodes inside a render tree. Support is as follows:

 * class syntax (`.foo`, `.foo-bar`, etc.)
* element tag name syntax (`input`, `div`, `span`, etc.)
* id syntax (`#foo`, `#foo-bar`, etc.)
* attribute syntax (`[href="foo"]`, `[type="text"]`, and the other attribute selectors listed [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors).)
* universal syntax (`*`)
* React component name and props (`Button`, `Button[type="submit"]`, etc) - however, please note that it is strongly encouraged to find by component constructor/function and not by display name.

 The attribute syntax also works by value, rather than by string. Strings, numbers, and boolean property values are supported. Example:

 
```
const wrapper = mount((
  <div>
    <span anum={3} abool={false} />
    <span anum="3" abool="false" />
  </div>
));

```
 The selector `[anum=3]` will select the first  but not the second, because there's no quotes surrounding the 3. The selector `[anum="3"]` will select the second, because it's explicitly looking for a string because of the quotes surrounding 3. The same goes for the boolean; [abool=false] will select the first but not the second, etc.

 Further, enzyme supports combining any of those supported syntaxes together, as with CSS:

 
```
div.foo.bar
input#input-name
a[href="foo"]
.foo .bar
.foo > .bar
.foo + .bar
.foo ~ .bar
.foo input

```
 **React Key and Ref Props**

 While in most cases, any React prop can be used, there are exceptions. The `key` and `ref` props will never work; React uses these props internally.

 **Want more CSS support?**

 PRs implementing more support for CSS selectors will be accepted and is an area of development for enzyme that will likely be focused on in the future.

 
2. A React Component Constructor
---------------------------------

 enzyme allows you to find React components based on their constructor. You can pass in the reference to the component’s constructor. Of course, this kind of selector only checks the component type; it ignores props and children.

 
```
function MyComponent() {
  return <div />;
}

// find instances of MyComponent
const myComponents = wrapper.find(MyComponent);

```
 
3. A React Component’s displayName
-----------------------------------

 enzyme allows you to find components based on a component’s `displayName`. If a component exists in a render tree where its `displayName` is set and has its first character as a capital letter, you can use a string to find it:

 
```
function MyComponent() {
  return <div />;
}
MyComponent.displayName = 'My Component';

// find instances of MyComponent
const myComponents = wrapper.find('My Component');

```
 NOTE: This will *only* work if the selector (and thus the component’s `displayName`) is a string starting with a capital letter. Strings starting with lower case letters will be assumed to be a CSS selector (therefore a tag name).

 Selecting a HOC-wrapped component, or a component with a custom `displayName`, even with lowercase letters (for example, `withHOC(MyComponent)`) will work as well.

 
4. Object Property Selector
----------------------------

 enzyme allows you to find components and nodes based on a subset of their properties:

 
```
const wrapper = mount((
  <div>
    <span foo={3} bar={false} title="baz" />
  </div>
));

wrapper.find({ foo: 3 });
wrapper.find({ bar: false });
wrapper.find({ title: 'baz' });

```
 **Undefined Properties**

 Undefined properties are not allowed in the object property selector and will cause an error:

 
```
wrapper.find({ foo: 3, bar: undefined });
// => TypeError: Enzyme::Props can't have 'undefined' values. Try using 'findWhere()' instead.

```
 If you have to search by `undefined` property value, use [`.findWhere()`](shallowwrapper/findwhere).



 © 2015 Airbnb, Inc.  
Licensed under the MIT License.  

<https://enzymejs.github.io/enzyme/docs/api/selector.html>

enzyme