jeudi 23 février 2017

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

Aucun commentaire:

Enregistrer un commentaire