chai-react-element

Build Status

Dependency Status devDependency Status

動機

這個函式庫提供鏈式行為，並允許使用 include 語言鏈進行 React 風格 VDOM 的巢狀斷言。斷言是針對未渲染（或淺渲染）的元素進行，使其成為不依賴 DOM（無論是虛擬還是真實）的輕量級測試。

透過使用鴨子型別，此外掛可以接受 ReactElement 或任何具有與 ReactElement 相同屬性的物件

  • 一個字串 type 屬性
  • 一個 props 屬性，它是一個物件，或者根本沒有 props 屬性

替代方案

還有其他幾個 Chai 外掛旨在幫助對 React 物件進行斷言。這個函式庫與替代方案的不同之處如下：

用法

expect(<div>hello</div>).to.have.text('hello');
expect(<div></div>).to.have.elementOfType('div')
expect(<div data-foo="bar"></div>).to.have.prop('data-foo', 'bar');

expect(<div><div data-foo="bar"></div></div>).to.include.prop('data-foo', 'bar');

expect(<div><span>hello</span></div>).to.include.elementOfType('span').with.text('hello');

鏈式操作是非同步的，也就是說，它不會針對找到的第一個元素進行比對，這表示這個斷言會成立

expect(<div><span></span><span>hello</span></div>).to.include.elementOfType('span').with.text('hello');

設定

$ npm install chai-react-element

注意：目前僅支援 React 0.13.x。升級至 React 0.14.x 的工作將在不久的將來開始。

import chai, {expect} from 'chai';
import matcher from 'chai-react-element';
chai.use(matcher);

此外掛以 ES6 模組匯出。如果使用 ES5，請使用

chai.use(require('chai-react-element').default);

注意事項

鏈式行為僅支援 .elementOfType 斷言。這表示 .prop 和 .text 斷言只能在斷言鏈的末尾使用，且不支援以下樣式

expect(<div data-foo="bar"><span></span></div>).to.have.prop('data-foo', 'bar').with.an.elementOfType('span')

對於巢狀斷言，負面斷言的行為可能不如預期。例如，以下範例會在遇到第一個 span 元素時立即失敗，但它應該僅在第二個元素時失敗。

expect(<div><span></span><span data-foo="bar"></span></div>).to.not.include.elementOfType('span').with.prop('data-foo');

貢獻

設定

此專案使用 Gulp 進行建置和測試，並使用 webpack-dev-server 在瀏覽器中執行和偵錯。若要安裝專案，只需執行 npm install。

若要啟動開發環境，請執行 npm start，或者，如果您已在全域安裝 Gulp，請執行 gulp dev。這會使用 Mocha 執行測試，此外還會在 8080 連接埠啟動 webpack-dev-server。若要執行測試，請使用 npm test（或 gulp test）。

問題

如果您發現任何問題，請在專案的 GitHub 儲存庫上開啟一個問題。請在討論過問題後再建立提取請求。

提取請求

請嘗試使用測試驅動開發來開發您的提交。至少，請確保您的變更已透過測試涵蓋，並且您的程式碼是乾淨的。

路線圖

  • 支援 React 0.14.x
  • 支援巢狀負面斷言（請參閱上方）