chai-shallowly

一個用於 Enzyme 的 Chai 斷言外掛。這個斷言外掛的目標是讓您可以使用類似 Chai 的語法搭配 Enzyme。

語法看起來像這樣

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

如果您想淺層渲染某些東西並使用此 API，您必須包含關鍵字 shallowly。其餘的應該會如您預期般運作。

注意： 這不會更改 Chai 的上下文。 expect(component).to.shallowly.be.ok 將會針對 `component` 進行檢查，而不是其淺層版本。這是一個刻意的設計選擇。

與 Karma 和 Webpack 的整合

Enzyme 目前不預期被打包到一個大型檔案中。這會導致 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);