The enzyme returns zero to support the fine-grained component of the reaction

Question

Problem

I am just starting out with an enzyme and testing the reaction. I am trying to get the enzyme to work with karma and webpack on a trivial component of the reaction. My problem is that prop() on the wrapper returns null, and I'm not sure why.

Greeter.js

 import React from 'react'; /* * A trivial component we added while trying to get the react testing working * */ export default class Greeter extends React.Component { constructor(props) { super(props); this.state = { name: props.initialName }; this.greeterText = this.greeterText.bind(this); } greeterText() { return (<p>Hello, {this.state.name}!</p>); } render() { return (<div className="greeter"> {this.greeterText()} </div>); } } Greeter.defaultProps = { initialName: "World" }; Greeter.propTypes = { initialName: React.PropTypes.string }; 

greeter.spec.js

 import Greeter from '../../components/test/Greeter'; import React from 'react'; import { shallow } from 'enzyme'; describe("Simple testing with shallow rendering", () => { beforeEach(function() { let initialName = "joe"; this.wrapper = shallow(<Greeter initialName={initialName} />); }); it("renders default Greeter", function() { console.log(this.wrapper.find(".greeter").text()); console.log(this.wrapper.debug()); console.log(this.wrapper.state('name')); expect(this.wrapper.state('name')).to.equal("joe"); expect(this.wrapper.prop('initialName')).to.equal("joe"); }); }); 

Result

Simple test with fine visualization × displays Greeter Chrome 50.0.2661 (Windows 10 0.0.0) by default AssertionError: expected undefined to be 'joe' in Assertion.assertEqual → (F: /web/forms/node_modules/chai/chai.js: 776: 12) at Assertion.ctx. (anonymous function) [as equal] (F: web / forms / node_modules / chai / chai.js: 4192: 25) in the Context. (F: web / forms / spec / components / greeter.spec.js: 9: 2932 <- webpack: ///spec/components/greeter.spec.js: 18: 52)

Stack

• respond 0.14.8
• karma
• Webpack
• enzyme 2.2.0

Answer 1

If you want to test the details passed in this way, use mount as follows:

  it('allows us to set props', () => { const wrapper = mount(<Foo bar="baz" />); expect(wrapper.props().bar).to.equal("baz"); wrapper.setProps({ bar: "foo" }); expect(wrapper.props().bar).to.equal("foo"); });