enzyme: ShallowWrapper.props() returns props of first child element instead of wrapped React Component
Current behavior
I have been using Enzyme already for months for tests and none of the other tests fail, it is just with this element. I have made the code very barebone to see if I could figure out if I did something wrong but with this code it is still occuring:
The only change is replacing the original path with path/to
of the import
See comments for the current outputs:
import React from "react";
import { expect } from "chai";
import enzyme from "enzyme";
import { BareHeader } from "path/to/bare_header.jsx";
describe("BareHeader", function(){
let component;
before(function(){
component = enzyme.shallow(<BareHeader currentStepNumber={1234}/>);
console.dir(component.props()); // {children: ..., className: "header-container"}
let compInst = component.instance();
console.dir(compInst.props); // {currentStepNumber: 1234}
});
//Fails: expected undefined to equal 1234
it("should have right prop", function(){
expect(component.prop("currentStepNumber")).to.equal(1234);
});
});
bare_header.jsx:
import React from "react";
class BareHeader extends React.Component {
render(){
return (
<div className="header-container">
<div className='header-hoverArea'>
<p>header placeholder</p>
</div>
</div>
);
}
}
export { BareHeader };
Expected behavior
See comment for expected:
import React from "react";
import { expect } from "chai";
import enzyme from "enzyme";
import { BareHeader } from "path/to/bare_header.jsx";
describe("BareHeader", function(){
let component;
before(function(){
component = enzyme.shallow(<BareHeader currentStepNumber={1234}/>);
console.dir(component.props()); // {children: ..., currentStepNumber: 1234}
let compInst = component.instance();
console.dir(compInst.props); // {currentStepNumber: 1234}
});
//Passing
it("should have right prop", function(){
expect(component.prop("currentStepNumber")).to.equal(1234);
});
});
Your environment
Mocha automated tests in MeteorJS application (1.6.1). Mocha distribution is meteortesting/meteor-mocha.
API
- shallow
- mount
- render
Version
library | version |
---|---|
Enzyme | 3.3.0 |
React | 16.2.0 |
Meteor Mocha | 0.5.1 |
Mocha | 2.4.5 |
Adapter
- enzyme-adapter-react-16
- enzyme-adapter-react-15
- enzyme-adapter-react-15.4
- enzyme-adapter-react-14
- enzyme-adapter-react-13
- enzyme-adapter-react-helper
- others ( )
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 5
- Comments: 22 (10 by maintainers)
component.instance().props doesn’t work no more with React 16 (functional components). Is there an alternative.
You’d do that by directly shallow-wrapping
MyComponent
, and not testing MyComponent’s props directly (because you just passed them in; testing them is a waste of time)So is there any way we could make assertions by passing props in react-native.