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)

Most upvoted comments

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.