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