enzyme-fresh

    2.3.0 • Public • Published

    Enzyme (with removed react 0.13 support)

    Join the chat at https://gitter.im/airbnb/enzyme

    npm Version License Build Status Coverage Status

    Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

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

    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 and chai, but you should be able to extrapolate to your framework of choice.

    If you are interested in using enzyme with custom Chai.js assertions and convenience functions for testing your React components, you can consider using chai-enzyme.

    If you are interested in using enzyme with custom Jasmine/Jest assertions and convenience functions for testing your React components, you can consider using jasmine-enzyme.

    Using Enzyme with Mocha

    Using Enzyme with Karma

    Using Enzyme with Browserify

    Using Enzyme with WebPack

    Using Enzyme with JSDOM

    Using Enzyme with React Native

    Using Enzyme with Jest

    Using Enzyme with Lab

    Installation

    To get started with enzyme, you can simply install it with npm:

    npm i --save-dev enzyme

    Enzyme is currently compatible with React 15.x, React 0.14.x and React 0.13.x. In order to achieve this compatibility, some dependencies cannot be explicitly listed in our package.json.

    If you are using React 0.14 or React 15.x, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:

    npm i --save-dev react-addons-test-utils
    npm i --save-dev react-dom

    Basic Usage

    Shallow Rendering

    import React from 'react';
    import { shallow } from 'enzyme';
    import sinon from 'sinon';
     
    describe('<MyComponent />', () => {
     
      it('renders three <Foo /> components', () => {
        const wrapper = shallow(<MyComponent />);
        expect(wrapper.find(Foo)).to.have.length(3);
      });
     
      it('renders an `.icon-star`', () => {
        const wrapper = shallow(<MyComponent />);
        expect(wrapper.find('.icon-star')).to.have.length(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.calledOnce).to.equal(true);
      });
     
    });

    Read the full API Documentation

    Full DOM Rendering

    import React from 'react';
    import sinon from 'sinon';
    import { mount } from 'enzyme';
     
    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.calledOnce).to.equal(true);
      });
     
      it('calls componentDidMount', () => {
        sinon.spy(Foo.prototype, 'componentDidMount');
        const wrapper = mount(<Foo />);
        expect(Foo.prototype.componentDidMount.calledOnce).to.be.true;
        Foo.prototype.componentDidMount.restore();
      });
     
    });

    Read the full API Documentation

    Static Rendered Markup

    import React from 'react';
    import { render } from 'enzyme';
     
    describe('<Foo />', () => {
     
      it('renders three `.foo-bar`s', () => {
        const wrapper = render(<Foo />);
        expect(wrapper.find('.foo-bar').length).to.equal(3);
      });
     
      it('renders the title', () => {
        const wrapper = render(<Foo title="unique" />);
        expect(wrapper.text()).to.contain("unique");
      });
     
    });

    Read the full API Documentation

    Future

    Enzyme Future

    Contributing

    See the Contributors Guide

    In the wild

    Organizations and projects using enzyme can list themselves here.

    License

    MIT

    Install

    npm i enzyme-fresh

    DownloadsWeekly Downloads

    0

    Version

    2.3.0

    License

    MIT

    Last publish

    Collaborators

    • ikbaht