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
  • 支持嵌套负断言（见上文）