Enzyme: Missing context values for child component when mount with options.context

Created on 14 Nov 2016  路  1Comment  路  Source: enzymejs/enzyme

Problem Description

When we mount a Parent component which contains a Child component with context values,
if we don't specify contextTypes for Parent,
The context values provide to children will be undefined.

Example to reproduce the issue

const Child = React.createClass({
  contextTypes: {
    translate: React.PropTypes.func
  },

  render() {
    // this.context.translate === undefined
    // expect this.context.translate to be a function
    const { translate } = this.context;

    return <span>{ translate('child') }</span>;
  }
});

const Parent = React.createClass({
  // if we specify contextTypes in Parent level
  // then in child level the context.translate would be a function
  // contextTypes: {
  //   translate: React.PropTypes.func
  // },

  render() {
    return (
      <div>
        <span>parent</span>
        <Child />
      </div>
    );
  }
});

mount(<Parent />, { context: { translate: a => a } });

Appreciate for your help,

Most helpful comment

Ah, noticed a optional option called childContextTypes, after providing that to the mount it works.

mount(<Parent />, { 
  context: { translate: a => a }, 
  childContextTypes: {
    translate: React.PropTypes.func
  } 
});

>All comments

Ah, noticed a optional option called childContextTypes, after providing that to the mount it works.

mount(<Parent />, { 
  context: { translate: a => a }, 
  childContextTypes: {
    translate: React.PropTypes.func
  } 
});
Was this page helpful?
0 / 5 - 0 ratings