当使用完全渲染或浅渲染时，为什么没有使用组件道具的酶find（）以相同的方式工作？

Question

根据浅层渲染和完全渲染（mount）的 find（）的酶文档，应该能够使用props的值查找组件。 对于完全和浅的渲染，这似乎没有相同的方式，因为我的文档似乎没有解释预期会有任何差异。

被测试的示例组件

import React, { Component } from 'react';

class Foo extends Component {
  render() {
    return (
      <div>
        <h1>Foo</h1>
        {this.props.children}
      </div>
    );
  }
}

class Bar extends Component {
  render() {
    return (<h1>Bar</h1>);
  }
}

class FindTest extends Component {
  render() {
    return (
      <div>
        <span spanProp="spanValue">Enzyme Find Test</span>
        <Foo fooProp="fooValue">
          <Bar barProp="barValue" />
        </Foo>
      </div>
    );
  }
}

export default FindTest;
export { Foo, Bar };

示例测试文件

import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';

import FindTest, { Foo, Bar } from 'components/FindTest/FindTest.js';

describe('<FindTest />', () => {
  it('can find using props with shallow rendering', () => {
    const wrapper = shallow(<FindTest />);
    // Passes
    expect(wrapper.find({ spanProp: 'spanValue' })).to.have.length(1);
    // Passes
    expect(wrapper.find({ fooProp: 'fooValue' })).to.have.length(1);
    // Passes
    expect(wrapper.find({ barProp: 'barValue' })).to.have.length(1);
    // Passes
    expect(wrapper.find(Foo).find({ barProp: 'barValue' })).to.have.length(1);
  });

  it('can find using props with mount rendering', () => {
    const wrapper = mount(<FindTest />);
    //Passes
    expect(wrapper.find({ spanProp: 'spanValue' })).to.have.length(1);
    // Fails
    expect(wrapper.find({ fooProp: 'fooValue' })).to.have.length(1);
    // Fails
    expect(wrapper.find({ barProp: 'barValue' })).to.have.length(1);
    // Fails
    expect(wrapper.find(Foo).find({ barProp: 'barValue' })).to.have.length(1);
  });
});

Answer 1

在mount模式下测试失败，因为使用react-addons-test-utils将组件渲染到构造函数中的视觉dom中，并且react不能在元素中使用动态属性，并且动态属性将被条带化。如果你需要你必须使用动态proeprty从数据开始，例如：data-property-value.see： https ：//facebook.github.io/react/warnings/unknown-prop.html&https： //github.com/holi-java /getstarted-react/blob/master/test/13.react-unknown-prop.test.js

renderWithOptions = (node, options) => {
   if (options.attachTo) {
      return React.render(node, options.attachTo);
    }
    return TestUtils.renderIntoDocument(node);
};

Answer 2

截至2017年2月，它似乎是一个错误。

正如@ holi-java在上面的评论中提到的那样。 如果节点是反应组件，则装入遍历的instMatchesObjectProps方法不会返回节点。

这个现有的错误发现在Enzyme项目https://github.com/airbnb/enzyme/issues/376上 ，这个PR正在修复问题https://github.com/airbnb/enzyme/pull/377