chai-shallowly

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);