Naphthalene Possum Management

    chai-shallowly

    1.0.0 • Public • Published

    chai-shallowly

    A chai assertion plugin for enzyme. The goal of this assertion plugin is to allow you to use a chai-like synax with enzyme.

    The syntax looks like this:

    let component = <Foo />;
    expect(component).to.shallowly.haveClass("this-is-a-class");

    If you want to shallowly render something and use this API you must include the keyword shallowly. The rest should work as you expect.

    NOTE: This does not change the context of chai. expect(component).to.shallowly.be.ok will check against component not the shallow version of it. This is an intentional design choice.

    Integration With Karma and Webpack

    Enzyme is currently not expecting to be bundled in to one large file. This causes problems with Karma and Webpack. You will likely see hundreds of nearly nonsensical error messages that boil down to a few things:

    1. Webpack expects a few globals to be announced.
    2. Webpack needs to not parse sinon and just import it.

    Here is the config we used (you can check out the entire config in the source):

    externals: {
      jsdom: "window",
      cheerio: "window",
      "react/lib/ExecutionEnvironment": true,
      "react/lib/ReactContext": true
    },
    resolve: {
      alias: {
        sinon: require.resolve("sinon/pkg/sinon")
      }
    },
    module: {
      noParse: [
        /node_modules\/sinon\//
      ]
    }

    If you want Enzyme (and chai-enzyme) to work with Karma and Webpack you will need to add these to your test-only config.

    API

    You can check out the tests for more explicit coverage and usages. Here I will cover what we have done so far.

    // hasClass
    expect(shallow(component).hasClass("class")).to.be.true;
    expect(component).to.shallowly.haveClass("class");
     
    // text
    expect(shallow(component).text()).to.equal("text");
    expect(component).to.shallowly.have.text().equal("text");
     
    // is
    expect(shallow(component).is("div")).to.be.true;
    expect(component).to.shallowly.match("div");
     
    // type
    expect(shallow(component).type("div")).to.be.true;
    expect(component).to.shallowly.have.type("div");
     
     
    // find
    expect(shallow(component).find(".foo")).to.have.length(2);
    expect(component).to.shallowly.find(".foo").to.have.length(2);
     
    // filter
    expect(shallow(component).find(".foo").filter(".bar")).to.have.length(1);
    expect(component).to.shallowly.find(".foo").filter(".bar").to.have.length(1);
     
    // not
    expect(shallow(component).find(".foo").not(".bar")).to.have.length(1);
    expect(component).to.shallowly.find(".foo").without(".bar").to.have.length(1);
     
    // contains
    expect(shallow(component).contains("div")).to.be.true;
    expect(component).to.shallowly.containJSX("div");
     
    // state
    expect(shallow(component).state(state)).to.eql({"foo": "bar"});
    expect(component).to.shallowly.have.state(state).eql({"foo": "bar"});
     
    // props
    expect(shallow(component).instance().props(propKey)).to.eql(propValue);
    expect(component).to.shallowly.have.props(propKey).eql(propValue);
     
    // simulate
    /* all of this */
    var shallowComponent = shallow(component);
    shallowComponent.simulate("click");
    expect(shallowComponent.state()).to.eql({"state":"clicked"});
     
    /* vs */
    expect(component).to.shallowly.on("click").have.state().eql({"state":"clicked"});
     
    // setState / setProps
    var shallowComponent = shallow(component);
    shallowComponent.setState(state);
    expect(shallowComponent.state()).to.equal(state);
     
    expect(component).to.shallowly.withState(state).to.have.state().equal(state);

    Install

    npm i chai-shallowly

    DownloadsWeekly Downloads

    185

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • jchip
    • ryan.roemer
    • iamdustan
    • exogen