component.state is null

[Jauny]

Hi, I have state initialized in my component's ES6 class constructor, but during test state is null;

class Card extends PureComponent {
  constructor(props) {
    super(props);
    
    this.styles = props.styles;
    this.state = {
      isCollapsed: this.props.isCollapsed || false  
    };

    this.collapse = this.collapse.bind(this);
  }

  [...]

test('<Card/> state', t => {
  const collapsedCard = mount(<Card isCollapsed={true}/>);
  t.equal(collapsedCard.state('isCollapsed'), true, 'collapsed when props.isCollapsed');

  t.end();
});

and I get this error

TypeError: Cannot read property 'isCollapsed' of null

I use

• "enzyme": "^3.2.0"
• "enzyme-adapter-react-15": "^1.0.5"
• "tape": "^4.8.0"

[ugogo]

Use props instead of this.props in the constructor

this.state = {
  isCollapsed: this.props.isCollapsed || false
};

->

this.state = {
  isCollapsed: props.isCollapsed || false
};

this.props does not exist yet in the constructor

[Jauny]

oh good point I updated. Although I still have the same issue.

even just making the state static won't work

this.state = {
  isCollapsed: true
};

[Jauny]

Ah nevermind, I was using a HOC - found discussion in #431 and will export my inner component separately!

[ljharb]

@Jauny you shouldn't need to do that; use .dive() instead with shallow.

[Jauny]

@ljharb wow awesome thanks a lot!

[dabit1]

I finally found a very good solution to get a wrapper from a decorated component. For shallowed components you can use dive() but there is no similar method for mounted components. This is the solution I did:

const wrapper = mount(shallow(<MyComponent />).get(0))

Works like a charm :)

[shroukkhan]

@dabit1 const wrapper = mount(shallow(<MyComponent />).get(0)) fails with Warning: Failed prop type: Invalid prop props of type function supplied to <<anonymous>>, expected object.
in Unknown

[tommyz0123]

const wrapper = mount(shallow(<MyComponent store={store}/>).get(0), { context: { store }, childContextTypes: { store: PropTypes.objectOf(PropTypes.any), }, });