chai-shallowly

enzyme 用の chai 断言プラグイン。この断言プラグインの目的は、enzyme で chai ライクな構文を使用できるようにすることです。

構文はこのようになります。

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

何かをシャローレンダリングしてこの API を使用したい場合は、キーワード shallowly を必ず含める必要があります。それ以外は期待どおりに動作します。

注意: これは chai のコンテキストは変更しません。 expect(component).to.shallowly.be.ok はコンポーネントに対してチェックし、そのシャローバージョンに対してはチェックしません。これは意図的な設計です。

Karma と Webpack への統合

enzyme は現在、1 つの大きなファイルにバンドルされることを想定していません。これにより、Karma と Webpack に問題が発生します。おそらく、少数のものに要約された大量のほとんど無意味なエラーメッセージが表示されるでしょう。

  1. Webpack はいくつかのグローバルが宣言されることを想定しています。
  2. Webpack は sinon をパースせず、インポートする必要があります。

以下が使用した構成です（ソースですべての構成を確認できます）

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\//
  ]
}

Enzyme（および chai-enzyme）を Karma と Webpack で使用したい場合は、これらをテスト専用の構成に追加する必要があります。

API

より明示的なカバレッジと使用方法については、テストを参照してください。ここでは、これまで行った内容について説明します。

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