CODEWITHSUNDEEP
javascriptreactjstestingecmascript-6enzyme
zwalker
zwalker

Reputation: 346

Why doesn't enzymes find() with component props work the same way when using full rendering or shallow rendering?

According to the enzyme documentation for find() for shallow rendering and full rendering (mount), one should be able to look up components using the value of props. This does not seem to work the same way for full and shallow rendering thought I the documentation doesn't seem to explain that there would be any difference expected.

Example component under test

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 };

Example Test File

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

Upvotes: 2

Views: 5474

Answers (2)

zwalker
zwalker

Reputation: 346

As of Feb '17 it seems to be a bug.

As @holi-java mentioned in his comments above. The instMatchesObjectProps method for mounted traversal just doesn't return nodes if the node is a react component.

This existing bug was found on the Enzyme project https://github.com/airbnb/enzyme/issues/376 and this PR are out to fix the issues https://github.com/airbnb/enzyme/pull/377

Upvotes: 0

holi-java
holi-java

Reputation: 30696

in mount mode the test failed,because enzyme using react-addons-test-utils to render component into an visual dom in constructor,and react can't using dynamic properties in an element and the dynamic property will be striped.if you need you must using dynamic proeprty starts with data-,e.g: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);
};

Upvotes: 1

Related Questions